Use this carrousel, it's better: http://jssor.com/demos/introduction-slider.html
Changing items target with different width
-
29-06-2023 - |
Question
I have a carrousel (Sorgalla's Carrousel) with a list of items. I want that if the width of the window is, for example, less than 1024px, it targets 3 items on scroll, and if the width is less than 640px is targets 2 items, and if the width is less than 320px targets 1 items.
I try with this code but didn't work (each resize need to have a reload function for the carrrousel to reload with the new scroll option):
The HTML code is:
<div class="box1"><a href="#addimg" class="plus2"></a><div id="addimg" style="width: 17.4%;height: 25px;" class="white-popup mfp-hide">
<input type="button" id="baddimg" style="float: left;" value="Añadir imágenes" onClick="addInput('dynamicInput');" />
<div id="loading"></div>
</div><a href="#" class="jcarouselimgs-control-next arrowimg-next"></a><a href="#" class="jcarouselimgs-control-prev arrowimg-prev"></a><h2 class="infotitle">OUR PORTFOLIO</h2>
<div class="jcarouselimgs" data-jcarousel="true">
<ul class="popupimg">
<li><a href="Imagenes/img1.png" class="image-link"><img src="Imagenes/img1.png" alt="Img1" title="Img1"></a></li>
<li><a href="Imagenes/img2.png" class="image-link"><img src="Imagenes/img2.png" alt="Img2" title="Img2"></a></li>
<li><a href="Imagenes/img3.png" class="image-link"><img src="Imagenes/img3.png" alt="Img3" title="Img3"></a></li>
<li><a href="Imagenes/img4.jpg" class="image-link"><img src="Imagenes/img4.jpg" alt="Img4" title="Img4"></a></li>
<li><a href="Imagenes/img5.jpg" class="image-link"><img src="Imagenes/img5.jpg" alt="Img5" title="Img5"></a></li>
<li><a href="Imagenes/img6.jpg" class="image-link"><img src="Imagenes/img6.jpg" alt="Img6" title="Img6"></a></li>
</ul>
</div>
</div>
And the JQuery code, i tried in two ways, this:
$(window).resize(function(){
if ($(".sampleClass").css("float") == "none" ){
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=1'
});
$('.arrowimg-next').jcarouselControl({
target: '+=1'
});
// your code here
}
});
$(window).resize(function(){
if ($(".sampleClass2").css("float") == "none" ){
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=3'
});
$('.arrowimg-next').jcarouselControl({
target: '+=3'
});
// your code here
}
});
Managing a sample CSS Class to set width:
.sampleClass {float:left;}
@media only screen and (max-width: 350px){
.sampleClass {float:none;}
}
.sampleClass2 {float:left;}
@media only screen and (max-width: 1024px){
.sampleClass2 {float:none;}
And i tried with this way too, both without results:
(function () {
if ($(window).width() < 300) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=1'
});
$('.arrowimg-next').jcarouselControl({
target: '+=1'
});
$('h1').addClass('blue');
}
if ($(window).width() < 640) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'slow'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=2'
});
$('.arrowimg-next').jcarouselControl({
target: '+=2'
});
}
if ($(window).width() > 1024) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});
$('.arrowimg-prev').jcarouselControl({
target: '-=3'
});
$('.arrowimg-next').jcarouselControl({
target: '+=3'
});
}
});
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow