轮播滑块无法显示全部内容

时间：2018-11-20 22:02:40

标签： javascript css

我正在使用Lightslider向页面添加轮播。我遇到的问题是，它切断了底部的内容，更糟的是，当我在浏览器中缩放以移动大小查看内容时，情况更糟。由于某些原因，这在第二张幻灯片上最明显

当我通过chrome上的inspect选项查看代码时，似乎添加了高度值

  • 旋转木马的一个例子在这里

    http://www.gerrymckay.co.uk/slider

    JavaScript 

    <script>
     $(document).ready(function() {
        $("#content-slider").lightSlider({
            loop:true,
            keyPress:true
        });
        $('#image-gallery').lightSlider({
            gallery:true,
            item:1,
            thumbItem:9,
            slideMargin: 0,
            speed:5000,
            auto:true,
            loop:true,
            onSliderLoad: function() {
                $('#image-gallery').removeClass('cS-hidden');
            }  
        });
    });
  </script>

  (function ($, undefined) {
  'use strict';
  var defaults = {
    item: 1,
    autoWidth: false,
    slideMove: 1,
    slideMargin: 10,
    addClass: '',
    mode: 'slide',
    useCSS: true,
    cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',
    easing: 'linear', //'for jquery animation',//
    speed: 400, //ms'
    auto: true,
    pauseOnHover: false,
    loop: false,
    slideEndAnimation: true,
    pause: 10000,
    keyPress: false,
    controls: true,
    prevHtml: '',
    nextHtml: '',
    rtl: false,
    adaptiveHeight: false,
    vertical: false,
    verticalHeight: 500,
    vThumbWidth: 100,
    thumbItem: 10,
    pager: true,
    gallery: false,
    galleryMargin: 5,
    thumbMargin: 5,
    currentPagerPosition: 'middle',
    enableTouch: true,
    enableDrag: true,
    freeMove: true,
    swipeThreshold: 40,
    responsive: [],
    /* jshint ignore:start */
    onBeforeStart: function ($el) {},
    onSliderLoad: function ($el) {},
    onBeforeSlide: function ($el, scene) {},
    onAfterSlide: function ($el, scene) {},
    onBeforeNextSlide: function ($el, scene) {},
    onBeforePrevSlide: function ($el, scene) {}
    /* jshint ignore:end */
};

    CSS 

    .test {text-align: center; display:flex-inline;
}

.test p {color: #ffffff; font-size: 14px;}

.testname {
color: #64D9E2;
font-size: 14px;
}

.content-slider li{
text-align: center;
color: #FFF;
width: 100%;
}

.lSSlideOuter {
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.lightSlider:before, .lightSlider:after {
content: " ";
display: table;
}
.lightSlider {
overflow: hidden;
margin: 0;
}
.lSSlideWrapper {
max-width: 100%;
overflow: hidden;
position: relative;
}
.lSSlideWrapper > .lightSlider:after {
clear: both;
}
.lSSlideWrapper .lSSlide {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: all 1s;
-webkit-transition-property: -webkit-transform,height;
-moz-transition-property: -moz-transform,height;
transition-property: transform,height;
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade {
position: relative;
}
.lSSlideWrapper .lSFade > * {
position: absolute !important;
top: 0;
left: 0;
z-index: 9;
margin-right: 0;
width: 100%;
}
.lSSlideWrapper.usingCss .lSFade > * {
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade > *.active {
z-index: 10;
}
.lSSlideWrapper.usingCss .lSFade > *.active {
opacity: 1;
}
/** /!!! End of core css Should not edit !!!/**/

/* Pager */
.lSSlideOuter .lSPager.lSpg {
margin: 10px 0 0;
padding: 0;
text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
cursor: pointer;
display: inline-block;
padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
background-color: #222222;
border-radius: 30px;
display: inline-block;
height: 8px;
overflow: hidden;
text-indent: -999em;
width: 8px;
position: relative;
z-index: 99;
-webkit-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > 
li.active a {
background-color: #428bca;
}
.lSSlideOuter .media {
opacity: 0.8;
}
.lSSlideOuter .media.active {
opacity: 1;
}
/* End of pager */

/** Gallery */
.lSSlideOuter .lSPager.lSGallery {
list-style: none outside none;
padding-left: 0;
margin: 0;
overflow: hidden;
transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.lSSlideOuter .lSPager.lSGallery li {
overflow: hidden;
-webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
transition: border-radius 0.12s linear 0s 0.35s linear 0s;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter 
.lSPager.lSGallery li:hover {
border-radius: 5px;
}
.lSSlideOuter .lSPager.lSGallery img {
display: block;
height: auto;
max-width: 100%;
}
.lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter 
.lSPager.lSGallery:after {
content: " ";
display: table;
}
.lSSlideOuter .lSPager.lSGallery:after {
clear: both;
}
/* End of Gallery*/

/* slider actions */
.lSAction > a {
width: 32px;
display: block;
top: 50%;
height: 32px;
background-image: url('../img/controls.png');
cursor: pointer;
position: absolute;
z-index: 99;
margin-top: -16px;
opacity: 0.5;
-webkit-transition: opacity 0.35s linear 0s;
transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
opacity: 1;
}
.lSAction > .lSPrev {
background-position: 0 0;
left: 10px;
}
.lSAction > .lSNext {
background-position: -32px 0;
right: 10px;
}
.lSAction > a.disabled {
pointer-events: none;
}
.cS-hidden {
height: 1px;
opacity: 0;
filter: alpha(opacity=0);
overflow: hidden;
}

    HTML 

    <div class="testimonials" >

<div class="item">
        <h2 class="white">Testimonials</h2>

           <ul id="content-slider" class="content-slider">
            <li>
            <div class="test">
                <img src="images/pr.png">
                    <p span style="display: block;">Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat 
mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, 
viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor 
mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
                    <span class="testname">Full Name - Profession title 
goes here</span>
            </div>
            </li>
            <li>
                <div class="test">
                <img src="images/ib.png">
                    <p>Morbi in sem quis dui placerat ornare. 
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed 
arcu. Cras consequat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas 
auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui 
mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec 
consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, 
gravida non, commodo a, sodales sit amet, nisi.</p>
                    <span class="testname">Full Name - Profession title 
goes here</span><br>
            </div>
            </li>

        </ul>
    </div>

    • 1 个答案:

    答案 0 :(得分：1)

    您的滑块正在使用您第一张幻灯片中内容的高度。如果要在转到更高的幻灯片时扩展它，请将其adaptiveHeight设置为true。

    有a GitHub issue关于这种不良行为。

    相关问题
    最新问题