When user clicked on the next image, I want the next image will take the place of current image in the carousal. Is there a way to do this?
My configuration for the jCarouselLite is as follows:
var carousalConfig = {
btnNext: '.corousal-nav .right-arrow',
btnPrev: '.corousal-nav .left-arrow',
btnGo:[],
vertical: false,
visible: 2,
start: 0,
afterEnd: function(a) {
a.next().css({opacity:.35});
a.prev().css({opacity:1});
}
$('.carousal-coontainer').jCarouselLite(carousalConfig);
html for the same
<div class="carousal-coontainer">
<ul>
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
</ul>
</div>
<div>
<div class="carousal_left_arrow"> <span class="left-arrow"> </span></div>
<div class="carousal_right_arrow"> <span class="right-arrow"></span> </div>
</div>
jCarouselLite has an event called 'go' where you can specify the slide you want to go to, or (if used without a number) will go to the next slide. In slider options we can add a class to elements that needs to receive click events and then attach a click event to li elements after initialization.
As a side note: jCarouselLite is old and can not work with jQuery 3.0+. There are many free alternatives that provide the same functionality
var carousalConfig = {
btnNext: ".default .next",
btnPrev: ".default .prev",
btnGo: [],
visible: 2,
start: 0,
afterEnd: function(a) {
// add a class to next element so we can attach click events
a.next().css({
opacity: .50
}).addClass("blurred");
// remove class to remove event attachment
a.prev().css({
opacity: 1
}).removeClass("blurred");
}
};
$(document).ready(function() {
let carousel = $('.custom-container');
carousel.jCarouselLite(carousalConfig);
// Carousel is initatied so attach click event handler to `.blurred` class
carousel.on("click", ".blurred", function() {
carousel.trigger('go');
})
});
#jcl-demo .carousel {
border: 1px solid #bababa;
border-radius: 10px;
background-color: ghostwhite;
float: left;
padding-left: 10px;
max-width: 100%;
overflow: hidden;
/* Needed for rendering without flicker */
/* position: relative;
visibility: hidden;
left: -5000px;*/
}
/* Styling for image based carousel content. Only width and height are mandatory */
#jcl-demo .carousel>ul>li>img {
width: 150px;
height: 118px;
vertical-align: middle;
/* optional */
margin: 10px 10px 10px 0;
border-radius: 5px;
}
/* Styling for text based carousel content. Only width and height are mandatory */
#jcl-demo .carousel>ul>li>p {
width: 130px;
height: 98px;
margin: 10px 10px 10px 0;
border: 1px solid #808080;
border-radius: 5px;
line-height: normal;
background-color: #fff;
padding: 10px;
}
/* Styles for PREV and NEXT anchor buttons */
#jcl-demo a.prev,
#jcl-demo a.next,
#jcl-demo a.go {
display: block;
width: 26px;
height: 30px;
line-height: 1;
background-color: #333333;
color: ghostwhite;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 25px;
border-radius: 8px;
float: left;
}
#jcl-demo a.prev.disabled,
#jcl-demo a.next.disabled,
#jcl-demo a.prev.disabled:hover,
#jcl-demo a.next.disabled:hover {
background-color: #8d8d8d;
cursor: default;
}
#jcl-demo a.go.highlight {
background-color: #dedede;
color: #000;
}
#jcl-demo a.prev {
margin: 10px 0px 0 0;
text-indent: 7px;
}
#jcl-demo a.next {
margin: 10px 0 0 0;
text-indent: 10px;
}
#jcl-demo a.prev:hover,
#jcl-demo a.next:hover,
#jcl-demo a.go:hover {
background-color: #666666;
}
/* Additional carousel styles for external controls, slider, widget, mid etc. */
#jcl-demo .externalControl button,
#jcl-demo .imageSliderExt button {
margin: 5px 5px 0 0;
}
#jcl-demo .externalControl a.next,
#jcl-demo .externalControl a.prev,
#jcl-demo .externalControl a.go,
#jcl-demo .imageSliderExt a.next,
#jcl-demo .imageSliderExt a.prev,
#jcl-demo .imageSliderExt a.go {
margin: 0 5px 0 0;
padding: 7px 5px 0 5px;
font-size: 15px;
text-align: center;
border-radius: 3px;
}
#jcl-demo .widget img {
cursor: pointer;
}
#jcl-demo .mid {
margin-left: 50px;
width: 400px;
height: 300px;
}
#jcl-demo .vertical {
margin-left: 170px;
}
#jcl-demo .imageSlider .carousel>ul>li>img,
#jcl-demo .imageSliderExt .carousel>ul>li>img {
width: 400px;
height: 300px;
}
#jcl-demo .imageSlider .carousel>ul>li>p,
#jcl-demo .imageSliderExt .carousel>ul>li>p {
width: 380px;
height: 280px;
}
/* Other common styles */
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jcarousellite@1.9.2/jcarousellite.min.js"></script>
<div id='jcl-demo'>
<div class="custom-container default">
<div class="carousel">
<ul>
<li><img src="https://images.unsplash.com/photo-1560577336-4c9f10bdf48f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>
<li><img src="https://images.unsplash.com/photo-1566535933277-3849dd2833a6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>
<li><img src="https://images.unsplash.com/photo-1561552596-f19273aea403?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>
<li><img src="
https://images.unsplash.com/photo-1556560302-312e68d6cbd0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>
</ul>
</div>
<a href="#" class="prev">‹</a>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>
</div>