javascript - 轮播滑块未显示完整内容

问题描述

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

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

旋转木马的一个例子是here

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>

标签： javascriptcss

javascript - 轮播滑块未显示完整内容

问题描述

解决方案

推荐阅读