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>
Related
I have 2 codes of swiper sliders.
And they do not work for me smoothly when the two are together on the same page, I tried to change the classes but it doesn't work also..
Anyone know how to fix this?
What should be done?
First swiper slider:
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-17-1.png" />>
</div>
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-18-1.png" />>
</div>
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-9-1.png" />>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
autoplay: {
delay: 1500,
},
});
</script>
Second Slider:
<body>
<!-- Swiper -->
<div class="swiper mySwiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/דנאי.jpg" />
</div>
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/שף.jpg" />
</div>
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/רונית.jpg" />
</div>
</div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper1", {
spaceBetween: 30,
effect: "fade",
autoplay: {
delay: 1500,
},
loop: true,
});
</script>
I'm working with Slick carousel in JavaScript
http://kenwheeler.github.io/slick/
I want to show 2 slides plus part of the 3rd slide on the carousel, like in the picture below.
How do I achieve this effect?
Here is a Codepen of Slick in action
https://codepen.io/paveldominguez/pen/ElLfb
<section id="features" class="blue">
<div class="content">
<h2>Responsive Display</h2>
<div class="slider responsive">
<div>
<h3>1</h3>
</div>
<div>
<div>
<iframe width="100%" src="//www.youtube.com/embed/ubGpDoyJvmI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
<div>
<h3>10</h3>
</div>
</div>
</div>
</section>
i think this is a good example, it could help you. https://codepen.io/ehsantl/pen/QKGroV
with this css:
.slider {
max-width: 1400px;
margin: 0 auto;
background: red;
}
js:
var settings = {
dots: false,
arrows: false,
slide: '.slick-slideshow__slide',
slidesToShow: 2.5,
infinite: false,
centerMode: true,
centerPadding: '60px',
};
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>
I am using Owl Carousel 2. I want to display a dot for every item, but I want to show 5 dots at a time. Can anyone suggest to me how I will do this? Thanks.
HTML:
<div id="owl-demo" class="owl-carousel">
<div class="item">
<img src="images/banner/A.png" alt="A"/>
</div>
<div class="item">
<img src="images/banner/B.png" alt="B"/>
</div>
<div class="item">
<img src="images/banner/C.png" alt="C"/>
</div>
<div class="item">
<img src="images/banner/D.png" alt="D"/>
</div>
<div class="item">
<img src="images/banner/E.png" alt="E"/>
</div>
<div class="item">
<img src="images/banner/F.png" alt="F"/>
</div>
</div>
<div id="dots" class="owl-carousel">
<div class="item"><span>A</span></div>
<div class="item"><span>B</span></div>
<div class="item"><span>C</span></div>
<div class="item"><span>D</span></div>
<div class="item"><span>E</span></div>
<div class="item"><span>F</span></div>
</div>
JS:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true
});
});
Just change your JS to:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true,
dotsEach: true
});
});
I have two owl carousel. And one is over the other. One is image with some content and other is only content. And the both slider needs to change together.
This the code below for content slider
<div id="owkey-content-slider" class="owl-carousel">
<div class="item">
<div class="slider-content">
<h4>WE CREATE</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE BUILD</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE OFFER</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE DELIVER</h4>
</div>
</div>
</div>
This is the codes for image slider
<div class="header-bg-image-slide">
<div id="owkey-bg-slider" class="owl-carousel">
<div class="item">
<img src="img/owkey-slider-2.jpg">
<div class="number-item">01</div>
</div>
<div class="item">
<img src="img/owkey-slider.jpg">
<div class="number-item">02</div>
</div>
<div class="item">
<img src="img/shutterstock_327808505.jpg">
<div class="number-item">03</div>
</div>
<div class="item">
<img src="img/owkey-head.png">
<div class="number-item">04</div>
</div>
</div>
And they are initialized in the same conditions/parameters. They are changing together. But, when button was clicked those buttons are for the image slider and that doesn't change the other slider's contents certainly.
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owkey-bg-slider, #owkey-content-slider");
owl.owlCarousel({
navigation : true,
navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"],
singleItem : true,
transitionStyle : "fade",
autoPlay: true,
touchDrag: false,
mouseDrag: false
});
})
</script>
And I think experienced owl carousel user can help me in this.
There are solution for this problem in here that is for any other kind of slider but not for owl carousel.
Use Flickity Slider, it's a much better slider plugin.