Carousel slider not displaying full content
-2
I'm using lightslider to add a carousel to my page. The problem I'm having is that it's cutting off the content at the bottom, worse so when I scale in the browser to view it at a mobile size. This is most noticeable on the 2nd slide for some reason
When i view the code via the inspect option on chrome a height value seems to be added the
An example of the carousel is 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>
javascript css
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
add a comment |
-2
I'm using lightslider to add a carousel to my page. The problem I'm having is that it's cutting off the content at the bottom, worse so when I scale in the browser to view it at a mobile size. This is most noticeable on the 2nd slide for some reason
When i view the code via the inspect option on chrome a height value seems to be added the
An example of the carousel is 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>
javascript css
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
2
please create a minimum complete and verifiable example stackoverflow.com/help/mcve
– Yvonne Aburrow
Nov 20 '18 at 22:06
1
If we answer your question you're going to change your website by applying the provided solution, which will make the question no longer relevant for future users. Pay it forward by allowing your question to remain helpful for future visitors with a similar problem. Add a runnable Minimal, Complete, and Verifiable example in the question itself. Most veterans here dont even consider opening external links (on general principles) if you don't make the question self-sufficient.
– Andrei Gheorghiu
Nov 20 '18 at 22:10
add a comment |
-2
-2
-2
I'm using lightslider to add a carousel to my page. The problem I'm having is that it's cutting off the content at the bottom, worse so when I scale in the browser to view it at a mobile size. This is most noticeable on the 2nd slide for some reason
When i view the code via the inspect option on chrome a height value seems to be added the
An example of the carousel is 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>
javascript css
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
I'm using lightslider to add a carousel to my page. The problem I'm having is that it's cutting off the content at the bottom, worse so when I scale in the browser to view it at a mobile size. This is most noticeable on the 2nd slide for some reason
When i view the code via the inspect option on chrome a height value seems to be added the
An example of the carousel is 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>
javascript css
javascript css
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
edited Nov 20 '18 at 22:47
Gezzamondo
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
asked Nov 20 '18 at 22:02
GezzamondoGezzamondo
5463821
5463821
2
please create a minimum complete and verifiable example stackoverflow.com/help/mcve
– Yvonne Aburrow
Nov 20 '18 at 22:06
1
If we answer your question you're going to change your website by applying the provided solution, which will make the question no longer relevant for future users. Pay it forward by allowing your question to remain helpful for future visitors with a similar problem. Add a runnable Minimal, Complete, and Verifiable example in the question itself. Most veterans here dont even consider opening external links (on general principles) if you don't make the question self-sufficient.
– Andrei Gheorghiu
Nov 20 '18 at 22:10
add a comment |
2
please create a minimum complete and verifiable example stackoverflow.com/help/mcve
– Yvonne Aburrow
Nov 20 '18 at 22:06
1
If we answer your question you're going to change your website by applying the provided solution, which will make the question no longer relevant for future users. Pay it forward by allowing your question to remain helpful for future visitors with a similar problem. Add a runnable Minimal, Complete, and Verifiable example in the question itself. Most veterans here dont even consider opening external links (on general principles) if you don't make the question self-sufficient.
– Andrei Gheorghiu
Nov 20 '18 at 22:10
2
2
please create a minimum complete and verifiable example stackoverflow.com/help/mcve
– Yvonne Aburrow
Nov 20 '18 at 22:06
please create a minimum complete and verifiable example stackoverflow.com/help/mcve
– Yvonne Aburrow
Nov 20 '18 at 22:06
1
1
If we answer your question you're going to change your website by applying the provided solution, which will make the question no longer relevant for future users. Pay it forward by allowing your question to remain helpful for future visitors with a similar problem. Add a runnable Minimal, Complete, and Verifiable example in the question itself. Most veterans here dont even consider opening external links (on general principles) if you don't make the question self-sufficient.
– Andrei Gheorghiu
Nov 20 '18 at 22:10
If we answer your question you're going to change your website by applying the provided solution, which will make the question no longer relevant for future users. Pay it forward by allowing your question to remain helpful for future visitors with a similar problem. Add a runnable Minimal, Complete, and Verifiable example in the question itself. Most veterans here dont even consider opening external links (on general principles) if you don't make the question self-sufficient.
– Andrei Gheorghiu
Nov 20 '18 at 22:10
add a comment |
1 Answer
1
active
oldest
votes
1
Your slider is taking the height of the content in your first slide. If you want it to expand when you go to taller slides, set its adaptiveHeight to true.
There is a GitHub issue about this less-than-desirable behavior.
answered Nov 20 '18 at 22:39
tagurittagurit
16610
Is there no way of working out which one is the biggest in height and then setting them all to that rather than slider height changing for each slide?
– Gezzamondo
Nov 20 '18 at 22:50
@Gezzamondo Not natively in the lightSlider options, but some people have found workarounds (example)
– tagurit
Nov 22 '18 at 6:35
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402260%2fcarousel-slider-not-displaying-full-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Your slider is taking the height of the content in your first slide. If you want it to expand when you go to taller slides, set its adaptiveHeight to true.
There is a GitHub issue about this less-than-desirable behavior.
answered Nov 20 '18 at 22:39
tagurittagurit
16610
Is there no way of working out which one is the biggest in height and then setting them all to that rather than slider height changing for each slide?
– Gezzamondo
Nov 20 '18 at 22:50
@Gezzamondo Not natively in the lightSlider options, but some people have found workarounds (example)
– tagurit
Nov 22 '18 at 6:35
add a comment |
1
Your slider is taking the height of the content in your first slide. If you want it to expand when you go to taller slides, set its adaptiveHeight to true.
There is a GitHub issue about this less-than-desirable behavior.
answered Nov 20 '18 at 22:39
tagurittagurit
16610
Is there no way of working out which one is the biggest in height and then setting them all to that rather than slider height changing for each slide?
– Gezzamondo
Nov 20 '18 at 22:50
@Gezzamondo Not natively in the lightSlider options, but some people have found workarounds (example)
– tagurit
Nov 22 '18 at 6:35
add a comment |
1
1
1
Your slider is taking the height of the content in your first slide. If you want it to expand when you go to taller slides, set its adaptiveHeight to true.
There is a GitHub issue about this less-than-desirable behavior.
answered Nov 20 '18 at 22:39
tagurittagurit
16610
Your slider is taking the height of the content in your first slide. If you want it to expand when you go to taller slides, set its adaptiveHeight to true.
There is a GitHub issue about this less-than-desirable behavior.
answered Nov 20 '18 at 22:39
tagurittagurit
16610
answered Nov 20 '18 at 22:39
tagurittagurit
16610
answered Nov 20 '18 at 22:39
tagurittagurit
16610
answered Nov 20 '18 at 22:39
tagurittagurit
16610
16610
Is there no way of working out which one is the biggest in height and then setting them all to that rather than slider height changing for each slide?
– Gezzamondo
Nov 20 '18 at 22:50
@Gezzamondo Not natively in the lightSlider options, but some people have found workarounds (example)
– tagurit
Nov 22 '18 at 6:35
add a comment |
Is there no way of working out which one is the biggest in height and then setting them all to that rather than slider height changing for each slide?
– Gezzamondo
Nov 20 '18 at 22:50
@Gezzamondo Not natively in the lightSlider options, but some people have found workarounds (example)
– tagurit
Nov 22 '18 at 6:35
Is there no way of working out which one is the biggest in height and then setting them all to that rather than slider height changing for each slide?
– Gezzamondo
Nov 20 '18 at 22:50
Is there no way of working out which one is the biggest in height and then setting them all to that rather than slider height changing for each slide?
– Gezzamondo
Nov 20 '18 at 22:50
@Gezzamondo Not natively in the lightSlider options, but some people have found workarounds (example)
– tagurit
Nov 22 '18 at 6:35
@Gezzamondo Not natively in the lightSlider options, but some people have found workarounds (example)
– tagurit
Nov 22 '18 at 6:35
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402260%2fcarousel-slider-not-displaying-full-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
please create a minimum complete and verifiable example stackoverflow.com/help/mcve
– Yvonne Aburrow
Nov 20 '18 at 22:06
1
If we answer your question you're going to change your website by applying the provided solution, which will make the question no longer relevant for future users. Pay it forward by allowing your question to remain helpful for future visitors with a similar problem. Add a runnable Minimal, Complete, and Verifiable example in the question itself. Most veterans here dont even consider opening external links (on general principles) if you don't make the question self-sufficient.
– Andrei Gheorghiu
Nov 20 '18 at 22:10