Owl carousel swiping slides makes element taller - javascript

enter image description here
The incoming slides being scrolled change height, but then snap back to the height the are supposed to be, only while scrolling.
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items: 4,
responsiveClass: true,
responsive: {
0: {
items: 4,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true
}
}
})
});
.slide {
width: 240px;
height: 350px;
}
<div class="container">
<div class="owl-carousel owl-theme">
<div class="slide" style="background-color: black;"> Your Content </div>
<div class="slide" style="background-color: red;"> Your Content </div>
<div class="slide" style=" background-color: green;"> Your Content </div>
<div class="slide" style=" background-color: blue;"> Your Content </div>
<div class="slide" style=" background-color: purple;"> Your Content </div>
<div class="slide" style="background-color: orange;"> Your Content </div>
<div class="slide" style="background-color: black;"> Your Content </div>
</div>
</div>
Using min-height and max-height did not work either


$(document).ready(function() {
$('.owl-carousel').owlCarousel({
//Autoplay
autoPlay : true,
goToFirst : true,
goToFirstSpeed : 1000,
loop: true,
items: 4,
responsiveClass: true,
responsive: {
0: {
items: 4,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true
}
}
})
});
.slide {
width: 240px;
height: 350px;
}
<!-- Basic stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<!-- You can use latest version of jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Include js plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div class="container">
<div class="owl-carousel owl-theme">
<div class="slide" style="background-color: black;"> Your Content </div>
<div class="slide" style="background-color: red;"> Your Content </div>
<div class="slide" style=" background-color: green;"> Your Content </div>
<div class="slide" style=" background-color: blue;"> Your Content </div>
<div class="slide" style=" background-color: purple;"> Your Content </div>
<div class="slide" style="background-color: orange;"> Your Content </div>
<div class="slide" style="background-color: black;"> Your Content </div>
</div>
</div>

Related

How to make carousel full width on mobile view

How to make my carousel turns to full width when I view on mobile phone or smaller screen device?
Any help would be appreciated.
You can check out the code below or simply view on my codepen here - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO
<div class="contain">
<div id="owl-carousel" class="owl-carousel owl-theme">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
</div>
</div>
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
display: block;
}
$('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
})

Hope It's Work for you !!!
jQuery(document).ready(function(){
jQuery('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
responsiveClass:true,
responsive:{
1000:{
items:2,
nav:true,
loop:true
},
600:{
items:1,
nav:true,
loop:true
},
0:{
items:1,
nav:true,
loop:true
}
}
});
});
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
background-color: salmon;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
</head>
<body>
<div class="contain">
<div id="owl-carousel" class="owl-carousel">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
</body>
</html>

how to use different swiperJS in one Html Page

I need to make two swiperjs in one html page but isn't working. I trying tow change and add new class but the result its same..
my Html
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="swiper1 mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide1">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide1">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper1">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>
and the js code for swiper1 and swiper2:
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
the swiper2 its working as I want. but swiper1 not working.

Basic example
Your first slider missing the mandatory HTML layout (swiper instead of swiper1 and swiper-slide instead of swiper-slide1).
https://swiperjs.com/get-started#add-swiper-html-layout
Wrong:
<div class="swiper1 will_not_work">
<!-- const swiper = new Swiper('.will_not_work', { -->
Correct:
<div class="swiper will_work">
<!-- const swiper = new Swiper('.will_work', { -->
snippet
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
let swiper_setting_two = {
spaceBetween: 200,
}
let swiper_1 = new Swiper("[slider_one]", swiper_setting);
let swiper_2 = new Swiper("[slider_two]", swiper_setting_two);
html,
body {
background: #403F6B;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></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>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
Loop throw example (multiple sliders with same setting):
You can take the example above and loop throw all sliders (Lets say for real estate pagelist with slider for each house card **like airbnb):
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
var swiper_nodes = document.querySelectorAll('.swiper');
/* loop throw */
[].forEach.call(swiper_nodes, function(swiper_node) {
// do whatever
let swiper = new Swiper(swiper_node, swiper_setting);
});
html,
body {
background: #403F6B;
}
main{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 3px;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<main>
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></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>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</main>

Yes the constructor of Swiper takes as argument one element at a time. So you should loop all the items with a forEach for example.
EDIT:
I made some changes in your HTML to fix the issues.
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
.swiper {
width: 300px;
height: 100px;
margin: 5px;
}
.swiper-slide {
background: yellow;
padding: 20px;
font-size: 32px;
}
.swiper-slide:nth-child(2) {
background: red;
}
.swiper-slide:nth-child(3) {
background: blue;
}
<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>
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper2">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>

Can't center Slick Carousel on page

I'm using the Slick Carousel (slick.js) but am having trouble horizontally centering the carousel on the page.
HTML:
<!-- logo slider -->
<section id="customer-carousel" class="slider responsive container m-5">
<div>
<img src="/images/customers/eth_zuerich_logo.png" class="customer-slide">
</div>
<div class="text-center">
<img src="/images/customers/kbsi_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/max-planck-institute-goettingen.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/nc_state_university_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/osaka_university_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/phoenixnmr_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/ruhr_universitaet_bochum_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/synex_medical_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/technical_university_of_brno_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/tu_ilmenau_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/tu_kaiserslautern_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/ucsb_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/UMD_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/unh-logo.png" class="customer-slide">
</div>
</section>
<!-- /logo slider -->
CSS:
#customer-carousel {
width: 100%!important;
}
.customer-slide {
width: 8rem;
max-height: 10rem;
margin-left: auto;
margin-right: auto;
}
JS:
(function ($) {
'use strict';
// Preloader js
$(window).on('load', function () {
$('.preloader').fadeOut(100);
});
// Accordions
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.ti-angle-right').removeClass('ti-angle-right').addClass('ti-angle-down');
}).on('hidden.bs.collapse', function () {
$(this).parent().find('.ti-angle-down').removeClass('ti-angle-down').addClass('ti-angle-right');
});
//slider
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
dots: true,
arrows: false
});
})(jQuery);
The page is staged here & the carousel is right on the home page (customer logos):
http://bridge12-staging.s3-website.us-east-2.amazonaws.com/
Really appreciate your help!
Thanks!
Mike

There is a class "m-5" on the slider that's setting the margins to 3rem!important. Removing that class seems to fix the horizontal centering. If that class is needed, you could override the margins in your CSS by ID:
#customer-carousel {
margin-left: auto!important;
margin-right: auto!important;
}

Jquery + owl.carousel - Stop the slider when flying video from youtube

I use jquery owl caorusel (http://owlgraphic.com/owlcarousel )
Sliders are 2 and in these videos from Youtube. When I click on the play this slider has to stop. Can anyone help?
My app
// owl home
$(".slider-home .owl-carousel").owlCarousel({
rewindNav: true,
navigation: true,
pagination: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
mouseDrag: false,
autoPlay: true,
stopOnHover: true,
rewindSpeed: 5000,
video:true,
lazyLoad:false,
afterMove : function(){
$('video').each(function () {
this.pause();
$('.slider-video').next().show();
});
}
});
and html
<div class="slider-home">
<div class="owl-carousel owl-theme">
<div class="item" style="background-image: url('tmp/car1920x1080.jpg');">
<div class="item-inner">
<div class="container">
<div class="row">
<div class="col-sm-9">
<h1>header1</h1>
</div> <!-- .col -->
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .item-inner -->
</div> <!-- .item -->
<div class="item disable-owl-swipe">
<iframe class="youtube-player" width="560" height="315" src="http://www.youtube.com/embed/9UlBsQLjjWI?loop=1&playlist=9UlBsQLjjWI&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div class="item-inner">
<div class="container">
<div class="row">
<div class="col-sm-9">
<h1>header2</h1>
</div> <!-- .col -->
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .item-inner -->
</div> <!-- .item -->
</div>

OWL Carousel 2 incorrect width, shows all items

I have the following OWL Carousel 2 initialization code:
$(document).ready(function(){
moment.locale('nl-NL');
$("#owl-slider").owlCarousel({
items: 1,
responsive: false,
nav : false,
loop: false,
dots: true,
dotsEach: 1,
autoplaySpeed : 300,
dotsSpeed : 400,
autoPlay: true,
navRewind: true,
animateOut: 'fadeOut'
});
});
This results in the following html of the carousel:
<div class="item-list" id="newsblock">
<div id="owl-slider" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;">
<div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark">Nieuwsbericht</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div><div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark">Nog meer nieuws</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
<div class="owl-item active" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark">Test</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
</div>
</div><div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot active"><span></span></div>
</div>
</div>
</div>
</div>
The problem is that the width of the owl-stage div is set to the width of all three items instead of 1. All items are shown instead of 1.
Please provide some guidance on what could be the solution!
Kind Regards.

I solved my problem by adding this code to css:
.owl-item {
float: left;
}
.owl-carousel {
overflow: hidden;
}

Add singleItem:true to your javascript.
This will make it display only a single image at a time.

The width of the owl stage div will always extend past the parent carousel container (div id="owl-slider" class="owl-carousel owl-theme") if there is more than one item in the carousel. This is easily fixed by setting overflow to hidden in your CSS.
.owl-carousel {
overflow: hidden;
}

Categories

Resources