如何使此缩略图幻灯片显示居中

时间：2018-09-28 19:19:55

标签： html css

我现在完全不知道。我已尽一切努力确保箭头和缩略图图像居中，但不知何故，它不会让步...我什至尝试了，但似乎没有效果。也有一个JS文件，但是我认为这并不重要，因此我不在此发布。 

    .gallery-outer {
            overflow: hidden;
            width: 830px;
            /*left: 18px;
            padding: 0 0 0 5px;*/
            height: 250px;
            margin-left: -50%;
            float: left;
        }
    
        .gallery-inner {
            float: left;
            height: 140px;
            position: relative;
            width: 3390px;
        }
    
        .gallery-tmb {
            float: left;
            margin: 0 10px 0 0;
    
        }
    
        #gallery {
            border-left: 1px solid #E9E9E9;
            border-right: 1px solid #E9E9E9;
            height: 80px;
            margin: 15px;
            padding: 0;
            position: relative;
            width: 400px;
        }
    
        #arrow-left {
            background:#d1d1d1;
            cursor: pointer;
            height: 82px;
            position: absolute;
            left: -7px;
            top: 0px;
            width: 25px;
        }
    
        #arrow-left-small {
            padding: 10px;
            box-shadow: 4px -4px 0 1px black;
            position: relative;
            display: inline-block;
            margin: 40px;
            transform: rotate(225deg);
            right: 27px;
            top:-9px;
        }
    
        #arrow-right {
            background:#d1d1d1;
            cursor: pointer;
            height: 82px;
            position: absolute;
            right: -476px;
            top: 0px;
            width: 25px;
        }
    
        #arrow-right-small {
            padding: 10px;
            box-shadow: 4px -4px 0 1px black;
            position: relative;
            display: inline-block;
            margin: 40px;
            transform: rotate(45deg);
            right: 49px;
            top:-9px;
        }
    <div id="gallery">
                        <div id="arrow-left">
                            <div id="arrow-left-small">
                            </div>
                        </div>
                        <div class="gallery-outer">
                            <div class="gallery-inner">
                                <div class="gallery-tmb">
                                    <img src="images/executive1.png" alt="Executive1" height="auto" width="250"/>
                                </div>
                                <div class="gallery-tmb">
                                    <img src="images/executive2.png" alt="Executive2" height="auto" width="250"/>
                                </div>
                                <div class="gallery-tmb">
                                    <img src="images/executive3.png" alt="Executive3" height="auto" width="250"/>
                                </div>
                                <div class="gallery-tmb">
                                    <img src="images/executive4.png" alt="Executive4" height="auto" width="250"/>
                                </div>
                                <div class="gallery-tmb">
                                    <img src="images/executive5.png" alt="Executive5" height="auto" width="250"/>
                                </div>
                                <div class="gallery-tmb">
                                    <img src="images/executive6.png" alt="Executive6" height="auto" width="250"/>
                                </div>
                                <div class="gallery-tmb">
                                    <img src="images/executive7.png" alt="Executive7" height="auto" width="250"/>
                                </div>
                            </div>
                        </div>
                        <div id="arrow-right">
                            <div id="arrow-right-small">
                            </div>
                        </div>
                </div>

(function ($) {
    $.fn.thumbGallery = function (settings) {
        var $this = $(this);
        return this.each(function () {
            settings = jQuery.extend({
                speed: 800,
                leftArrow: $this.find('#arrow-left'),
                rightArrow: $this.find('#arrow-right'),
                galleryContainer: $this.find('.gallery-inner'),
                visibleImagesSize: 4
            }, settings);

            var imgElements = settings.galleryContainer.find('img').length;
            var size = settings.visibleImagesSize;

            settings.leftArrow.hide();

            if (imgElements > settings.visibleImagesSize) {
                settings.rightArrow.show();
            } else {
                settings.rightArrow.hide();
            }

            function animateLeft() {
                var el = settings.galleryContainer.children(":last");

                settings.galleryContainer.animate({
                    left: '+=' + el.outerWidth(true) + 'px'
                },
                settings.speed);
            }

            function animateRight() {
                var el = settings.galleryContainer.children(":first");
                settings.galleryContainer.animate({
                    left: '-=' + el.outerWidth(true) + 'px'
                },
                settings.speed);
            }

            function checkArrows() {
                if (size === settings.visibleImagesSize) {
                    settings.leftArrow.hide();
                } else {
                    settings.leftArrow.show();
                }

                if (size === imgElements) {
                    settings.rightArrow.hide();
                } else {
                    settings.rightArrow.show();
                }
            }

            settings.leftArrow.click(function () {
                animateLeft();
                size--;
                checkArrows();
            });

            settings.rightArrow.click(function () {
                animateRight();
                size++;
                checkArrows();
            });

        });
    };
})(jQuery);

$(document).ready(function () {
    $('#gallery').thumbGallery();
});

3 个答案:

答案 0 :(得分：0)

我刚刚为您构建了一个包含所有基础知识的示例。 我不建议滥用浮动，只在真正需要时才使用。

// HOPE IT HELPS
.gallery{
 max-width: 600px;
 margin: 0 auto;
 text-align: center; /* this will center all the inline and inline-block content */ 
 background: purple;
}


.arrow-left,.arrow-right{
 width: 100px;
 height: 100px;
 display: inline-block;
 vertical-align: middle;
 background: blue;
 color: white;
 font-size: 5rem; /* just to make arrows show */ 
}

/* this is just to make the arrows show :p */
.arrow-left:before{
 content: '←';
}
.arrow-right:after{
 content: '→';
}


/* i'm just between the arrows and also inline (inline-block)*/ 
.gallery ul{
  vertical-align: middle;
  background: green;
  margin: 0;
  padding: 0;
  display: inline-block;
}

/* where the images will go (you can use divs instead of ul, li) */
.gallery li {
 display: inline-block;
}


img {
 background: red;
 width: 100px;
 height:100px;
}
<div class="gallery">
  <div class="arrow-left"></div>
  <ul>
   <li><img src="#" width=100 height=100 /></li>
   <li><img src="#" width=100 height=100 /></li>
   <li><img src="#" width=100 height=100 /></li>
  </ul>
  <div class="arrow-right">
  </div>
</div>

答案 1 :(得分：0)

使用flexbox的解决方案。

.gallery-outer {
    overflow: hidden;
    width: 830px;
    /*left: 18px;
    padding: 0 0 0 5px;*/
    height: 250px;
}

.gallery-inner {
    float: left;
    height: 100%;
    position: relative;
    width: 3390px;
}

.gallery-tmb {
    float: left;
    margin: 0 10px 0 0;

}

#gallery {
    border-left: 1px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
    display: flex;
    justify-content: space-between;
    margin: 15px;
    padding: 0;
    position: relative;
    width: 800px;
}

#arrow-left {
    background:#d1d1d1;
    cursor: pointer;
    height: 82px;
    width: 25px;
   align-self: center;
}

#arrow-left-small {
    padding: 10px;
    box-shadow: 4px -4px 0 1px black;
    position: relative;
    display: inline-block;
    margin: 40px;
    transform: rotate(225deg);
    right: 27px;
    top:-9px;
}

#arrow-right {
    background:#d1d1d1;
    cursor: pointer;
    height: 82px;
    width: 25px;
    align-self: center;
}

#arrow-right-small {
    padding: 10px;
    box-shadow: 4px -4px 0 1px black;
    position: relative;
    display: inline-block;
    margin: 40px;
    transform: rotate(45deg);
    right: 49px;
    top:-9px;
}

Flexbox solution

答案 2 :(得分：0)

您可以使用以下引导模板：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.thumbnail{
    height: 200px;
}


</style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container-fulid">
  <div class="row">
    <div class="col-md-2 text-right">
   <span class="glyphicon glyphicon-chevron-left" style="margin-top:20%"></span>
      </div>
    <div class="col-md-2">
      <div class="thumbnail">
      </div>
    </div>
    <div class="col-md-2">
      <div class="thumbnail">
      </div>
    </div>
    <div class="col-md-2">
      <div class="thumbnail">
      </div>
    </div>
    <div class="col-md-2">
      <div class="thumbnail">
      </div>
    </div>
    <div class="col-md-2 text-left">
        <span class="glyphicon glyphicon-chevron-right" style="margin-top:20%"></span>
        </div>
    </div>


</div>

</div>
</body>
</html>
相关问题
最新问题