I have a Swiper slider with 4 slides.
What I want to achieve: I want the number of slides to reduce to 3 when the width of the window is 750px or less.
What I'm trying to do is to catch resizing of the window object, and if it's 750px or less, the number of slides is reduced by changing the value of property slidesPerView to 3.
Example of my code is down below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
let mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 4,
spaceBetween: 30,
loop: true,
allowTouchMove: false,
speed: 600,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
$(function() {
$(window).resize(function() {
let windowWidth = $(window).width();
if (windowWidth <= 750) {
mySwiper.slidesPerView = 3;
}
});
});
</script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
</html>
How can I achieve this?
Here's how to easily change number of slides and space between them depending on window width:
const swiper = new Swiper('.swiper-container', {
// Default parameters
slidesPerView: 6,
spaceBetween: 45,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
},
direction: 'horizontal',
loop: true,
allowTouchMove: false,
speed: 600,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
Reference: https://swiperjs.com/swiper-api
Related
I'm using the Swiper script to show a slider with a mix of landscape and portrait photos on a site and I was wondering if it's possible to set a specific max height so all images have the same height respecting their aspect ratio. I know that there is a height parameter on Swiper but I tried it but it doesn't seem to make any difference. Also, I tried to set a max-height on the .swiper-wrapper class or the images inside it .swiper-slide > img but the images are either clipped or distorted.
Any ideas?
Thanks
var swiper = new Swiper( '.swiper-container', {
initialSlide: 0,
loop: true,
autoHeight: true,
height: 200,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
The easiest solution would be adding height: auto to the swiper-slider and height: 100% to the content inside.
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
slidesPerView: "auto",
centeredSlides: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
.swiper {
width: 600px;
height: 100%;
}
.swiper-slide {
background-color: grey;
height: auto !important;
text-align: center;
}
.swiper-content {
height: 100% !important
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
</head>
<body>
<main>
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="swiper-content">
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content">
<p>Slide 2 Content</p>
</div>
</div>
<div class="swiper-slide medium-content">
<div class="swiper-content">
<p>Slide 3 Content</p>
<p>Slide 3 Content</p>
</div>
</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</main>
<script src="index.js"></script>
</body>
</html>
I have this Owl code
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items:1,
autoplay:true,
autoplayTimeout:3500,
loop:true,
});
});
</script>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img id="city-img" width="100%" class="back-img-city" src="img/city.png" />
<img id="img-river" width="100%" class="back-img-river" src="img/river.png" />
</div>
</div>
Can I somehow write a script like this:
<script>
if(current owl slide is 2){
alert("Your slide is 2. Congrats");
}
</script>
Meaning is to, for example, alert if its 2nd slide on the screen.
Try using changed.owl.carousel event
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 3500,
loop: true
}).on('changed.owl.carousel', function(event) {
if (event.page.index + 1 == 2) {
alert("Your slide is 2. Congrats");
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>
<div id="owl-demo" class="owl-carousel owl-theme">
<div> Your Content 1</div>
<div> Your Content 2</div>
<div> Your Content 3</div>
</div>
JS noob here. I'm sorry if the answer is obvious, but I can't figure out why my slick carousel won't load. I've tried everything I can think of, but I'm at a loss. Please help me! Also, any recommended crash courses to understand the basics better would help greatly.
jQuery(document).on('ready', function() {
jQuery(".slickshow").slick({
lazyLoad: 'ondemand',
slide: '.slide',
autoplay: true,
autoplaySpeed: 5000,
dots: true,
prevArrow: '❮',
nextArrow: '❯',
speed: 1000,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
adaptiveHeight: true,
swipe: true,
swipeToSlide: true,
infinite: true
});
});
// On swipe event
jQuery('.slickshow').on('swipe', function(event, slick, direction) {
console.log(direction);
// left
});
// On edge hit
jQuery('.slickshow').on('edge', function(event, slick, direction) {
console.log('edge was hit')
});
// On before slide change
jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(nextSlide);
});
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
<section class="slickshow carousel">
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>SUMMERTIME SAVINGS</h2>
<p>100s of Items On Sale!</p>
<p>Shop the Sale Now!</p>
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Another+One">
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>MORE SAVINGS</h2>
<p>More Text Too!</p>
<p>Shop Now</p>
</div>
</section>
The problem I think was you prevArrow and nextArrow values.
I've also added the SLICK SLIDER css in the <head>.
From the docs reference https://kenwheeler.github.io/slick/
string (html|jQuery selector) | object (DOM node|jQuery object)
<button type="button" class="slick-prev">Previous</button>
Allows you to select a node or customize the HTML for the "Previous" arrow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Slick slider css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>
<section class="slickshow carousel">
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>SUMMERTIME SAVINGS</h2>
<p>100s of Items On Sale!</p>
<p>Shop the Sale Now!</p>
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Another+One">
</div>
<!--slide-->
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>MORE SAVINGS</h2>
<p>More Text Too!</p>
<p>Shop Now</p>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
jQuery(".slickshow").slick({
lazyLoad: 'ondemand',
slide: '.slide',
autoplay: true,
autoplaySpeed: 5000,
dots: true,
// string (html|jQuery selector) | object (DOM node|jQuery object)
prevArrow: '<button type="button" class="slick-next">❮</button>',
nextArrow: '<button type="button" class="slick-next">❯</button>',
speed: 1000,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
adaptiveHeight: true,
swipe: true,
swipeToSlide: true,
infinite: true
});
});
// On swipe event
jQuery('.slickshow').on('swipe', function(event, slick, direction) {
console.log(direction);
// left
});
// On edge hit
jQuery('.slickshow').on('edge', function(event, slick, direction) {
console.log('edge was hit')
});
// On before slide change
jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(nextSlide);
});
</script>
</body>
</html>
Hey guys I am new at web development and wanted to install owl carousel on the page but nothing happens. Here is the code I have:
<section class="showcase">
<div class="owl-carousel">
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
</div>
</section>
Then I have included the links in inside head tag as
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
Finally, I included the javascript codes just before closing body:
<script src="./OwlCarousel2-2.3.4/docs/assets/vendors/jquery.min.js"></script>
<script src="./OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
I really need your help
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
items: 1,
margin: 10,
autoplay: true,
autoPlay: 3000,
nav: false,
dots: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
loop: true,
});
Then in style include
.owl-item {
float:left
}
I'm trying to center a couple of images in a carousel with slickJS, however it is not properly centering the images due to the left offset being wrong. Anyway to fix this? Any recommendations of a JavaScript carousal that actually does the job? I pulled the code directly from the slick website and it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick-theme.css"/>
<style>
</style>
</head>
<body>
<div class="center">
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/app/source/slick/slick.min.js"></script>
<script type="text/javascript">
//straight from the website
$(document).ready(function(){
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
Result:
As you can see it is not aligning to the center properly and you can even see alittle of the 4th slide even though it is set to show only 3 slides. Any help is greatly appreciated!
The reason you are seeing the partial views of the edge images is because you have centerMode enabled in your setting, either remove it or set it to false to get rid of that edge view. Additionally, its not that the divs are taking up unequal widths, its that the images inside them are floating to the left, so it looks like there is extra space to the right, after the last image. To fix this just center the image withing its parent div using margin:auto.
$(document).ready(function() {
$('.center').slick({
//centerMode: true,
//centerPadding: '160px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '140px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '40px',
slidesToShow: 2
}
}
]
});
});
img{
margin:auto;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="center">
<div><img src="http://loremflickr.com/320/240?1" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?2" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?4" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?5" alt="shrimp"></div>
</div>