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
I want to enable deep-linking to images in a Swiper carousel. The "hashNavigation" component seems to be purpose-built for this but I can't see how to make it work. When I enable it and provide the data-hash attribute in my slides it replaces the entire path with the hash I provided. Obviously, this renders it useless for any swiper not on the home page. How can I get it to append the hash to the path instead of replacing it? Here's my code instantiating it:
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
mousewheel: true,
hashNavigation: {
watchState: true,
replaceState: true,
},
autoplay: {delay: 4444}
},
swiper = new Swiper(vis, swiperOpts);
And a markup sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="preconnect" href="//cdnjs.cloudflare.com">
<link rel="preconnect" href="//unpkg.com">
<link rel="stylesheet" href="//unpkg.com/swiper/css/swiper.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
</head>
<body class="visio">
<main>
<div class="swiper-container" id="vis">
<ul class="swiper-wrapper">
<li class="swiper-slide" data-hash="235" style="">
<p>slide one</p></li>
<li class="swiper-slide" data-hash="228" style="">
<p>slide two</p></li>
<li class="swiper-slide" data-hash="224" style="">
<p>slide tre</p></li>
<li class="swiper-slide" data-hash="227" style="">
<p>slide for</p></li>
<li class="swiper-slide" data-hash="236" style="">
<p>slide fiv</p></li>
</ul>
</div>
</main>
<script src="//unpkg.com/swiper/js/swiper.min.js"></script>
</body></html>
Here are some examples of the URLs I'm seeing:
base URL: domain.com/visio/sol
slide data-hash value: 224
URL after Swiper modifies: domain.com/#224
I was never able to get this to work properly but I worked around it with the following code:
let initIDX = 0;
if(window.location.hash){
let lmnt = document.querySelector('[data-hash="'+window.location.hash.substring(1)+'"]'),
i = 0;
while((lmnt = lmnt.previousSibling) != null) if(lmnt.nodeType == 1) ++i;
initIDX = i;
}
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
initialSlide: initIDX,
on:{
slideChangeTransitionEnd: function(){
history.replaceState(null, null,
window.location.pathname + '#' + this.slides[this.activeIndex].dataset.hash);
}
}
},
swiper = new Swiper(vis, swiperOpts);
This is working for me.
I have a Slick Slider with text on top of the images on each slide. The text should fade in when the current slide has the class .slick-active. Then when the slide doesn't have the class .slick-active anymore the text should become invisible and the text on the next slide should fade in and so on every time the slider changes the current slide. When the page loads for the first time everything seems to be working fine and as expected. The problem is that on page reload, or if one visits another page and then returns to the slider page, the text on the first slide fades in as expected but not on the other slides. It seems like the .on('afterChange') event fires because when using Chrome Dev Tools one can see that jQuery changes the opacity from 0 to 1 via .fadeTo(1), however, the text is not visible. But if one reloads enough times then the text fades in as expected. Also if one resizes the browser window the text becomes visible at certain browser size but at other browser sizes the text disappears. To me it seems like something is off with jQuery itself but I'm not sure.
Edit: this weird behaviour only happens if using Google Chrome or Opera (in Opera the text only shows up on the first slide even if it is the first time the page is loaded), seems to be working fine and as expected in both Safari and Mozilla Firefox. So some sort of Google Chrome / Opera + jQuery bug?
If someone could help it would be much appreciated!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Lazzo</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bars.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="css/custom-slick.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" href="https://use.typekit.net/jqi8pst.css">
</head>
<body>
<div class="container">
<header>
<div class="white logotype">
<a href="index.html">
<svg class="logotype-is-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.68 110.26"><path d="M19.91,91.14a2.38,2.38,0,1,0,0-4.75c-14.1,0-14.1-7.75-14.1-14v-70a2.38,2.38,0,1,0-4.76,0v70C1.05,78.49,1.05,91.14,19.91,91.14Z"/><path d="M55,51.78c-7.29,0-13.25,1.16-17.71,3.45C30.71,58.63,26.91,64.88,27.15,72c.24,7.3,4.85,13.75,12,16.85A41,41,0,0,0,55.6,91.94c6.92,0,15.92-.91,22-4.92a9.13,9.13,0,0,0,8.06,4.14,2.38,2.38,0,1,0,0-4.76c-3.3,0-5-1.92-5-5.71V46.26c0-7.1-4.37-12.77-12.29-16-13.7-5.54-30.34-1.57-37.28,5.62a2.38,2.38,0,0,0,.05,3.36,2.42,2.42,0,0,0,1.7.67,2.36,2.36,0,0,0,1.67-.73C41,32.51,56,30.4,66.61,34.69c3.48,1.41,9.32,4.78,9.32,11.57v5.52Zm21,30.5c-5.2,4.24-14.92,4.91-20.43,4.91a36.31,36.31,0,0,1-14.53-2.75c-5.47-2.36-9-7.21-9.17-12.65a13.25,13.25,0,0,1,7.59-12.33c3.78-1.94,9-2.93,15.54-2.93h20.9V80.69A13.57,13.57,0,0,0,76,82.28Z"/><path d="M97.45,33.69h39.09l-41,53.63a2.37,2.37,0,0,0,1.88,3.82h43.89a2.38,2.38,0,1,0,0-4.75H102.26l41-53.64a2.37,2.37,0,0,0-1.89-3.81H97.45a2.38,2.38,0,0,0,0,4.75Z"/><path d="M157.6,33.69h39.08l-41,53.64a2.37,2.37,0,0,0,1.9,3.81h43.88a2.38,2.38,0,1,0,0-4.75H162.4l41-53.64a2.37,2.37,0,0,0-1.9-3.81H157.6a2.38,2.38,0,1,0,0,4.75Z"/><path d="M262.85,10.6a49.83,49.83,0,0,0-21.28,94.9H2.38a2.38,2.38,0,1,0,0,4.75H262.85a49.83,49.83,0,0,0,0-99.66Zm.06,94.9h-.4a45.21,45.21,0,1,1,.4,0Z"/></svg>
</a>
</div><!-- /logotype -->
<div class="bars bars--slider">
<div class="bars-box">
<div class="white bars-inner">
</div><!-- /bars-inner -->
</div><!-- /bars-box -->
</div><!-- /bars bars--slider -->
</header>
<nav class="menu">
<ul>
<li>
CASE
</li>
<li>
OM
</li>
<li>
KONTAKT
</li>
</ul>
<footer>
<div class="contact">
0500 – 49 43 43
<div class="contact-divider">
|
</div><!-- /contact-divider -->
info#lazzo.nu
</div><!-- /contact -->
</footer>
</nav>
<div class="fullscreen content-slider big">
<div>
<div class="overlay">
<div class="heading-one">
<h3>Jönköpings Länstrafik</h3>
<h1>Världsnyheten i Värnamo</h1>
<a class="white" href="case.html">Se case</a>
</div><!-- /heading-one -->
</div><!-- /overlay -->
<img src="img/vasttrafik.jpg" alt="Västtrafik">
</div>
<div>
<div class="overlay">
<div class="heading-one">
<h3>Hotell Kungshamn</h3>
<h1>Omprofilering</h1>
<a class="white" href="case.html">Se case</a>
</div><!-- /heading-one -->
</div><!-- /overlay -->
<img src="img/hotellkungshamn.jpg" alt="Hotell Kungshamn">
</div>
<div>
<div class="overlay">
<div class="heading-one">
<h3>AH Automation</h3>
<h1>Robotmässa</h1>
<a class="white" href="case.html">Se case</a>
</div><!-- /heading-one -->
</div><!-- /overlay -->
<video autoplay loop muted>
<source src="video/ahautomation.mp4" type="video/mp4">
</video>
</div>
</div><!-- /fullscreen content-slider -->
</div><!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/custom-slick.js"></script>
<script src="js/white-bars.js"></script>
<script src="slick/slick.js"></script>
</body>
</html>
jQuery:
$(document).ready(function(){
$('.big').on('init', function(event, slick){
$('.slick-active .heading-one').delay(500).fadeTo(300, 1);
});
$('.big').on('reInit', function(event, slick){
$('.slick-active .heading-one').delay(500).fadeTo(300, 1);
});
$('.big').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .heading-one').css('opacity', '0');
});
$('.big').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .heading-one').fadeTo(300, 1);
});
//slick
$('.big').slick({
autoplay: false,
prevArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-prev"><polygon points="12.4,25.5 13.8,24.1 3,12.9 13.8,1.6 12.4,0.2 0.3,12.9 "/></svg>',
nextArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-next"><polygon points="1.7,25.5 0.3,24.1 11.1,12.9 0.3,1.6 1.7,0.2 13.8,12.9 "/></svg>',
fade: true,
pauseOnFocus: false,
pauseOnHover: false,
speed: 700,
});
$('.small').slick({
prevArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-prev"><polygon points="12.4,25.5 13.8,24.1 3,12.9 13.8,1.6 12.4,0.2 0.3,12.9 "/></svg>',
nextArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-next"><polygon points="1.7,25.5 0.3,24.1 11.1,12.9 0.3,1.6 1.7,0.2 13.8,12.9 "/></svg>',
pauseOnFocus: false,
pauseOnHover: false,
slidesToShow: 3,
slidesToScroll: 1,
speed: 700,
responsive: [
{
breakpoint: 1114,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 784,
settings: {
slidesToShow: 1,
}
},
],
});
});
I think you're probably overcomplicating it a bit; the desired behaviour can be achieved without additional JavaScript:
.heading-one {
opacity: 0;
transition: opacity .3s;
}
.slick-active .heading-one {
opacity: 1;
}
I'm building a males fashion site with a slider that have both images and a video in it. I'm using owl.carousel as a slider. The video is an plane HTML5 video tag.
I'm trying to start the video whith jquery like this: $('#video')[0].play();
It works perfectly when the video is outside the slider/carousel, but how do I start it inside?
Codepen link
I just look your codepen. After few tests, I saw two containers with class video-slider with a video tag with the same id "video" inside. (Check with debug console on the render view and the jquery code $(".video-slide").children()).
You can start the videoS with the jquery code $(".video-slide").children().each(function() { this.play(); }); but before you need to find where and why your blocks are duplicated.
I hope it helps
Created a snippet
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
I have created a sample HTML code.
Please check it.
set your CSS accordingly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style class="cp-pen-styles">
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
</style>
<title></title>
<script type='text/javascript'>
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>