I need to make a slider with owl carousel and I want it becomes like this image
js code :
$('.owl-carousel').owlCarousel({
rtl: true,
autoplay: true,
autoplayTimeout: 6000,
autoplayHoverPause: false,
loop: true,
autoWidth: true,
items: 3,
nav:true,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
smartSpeed: 900 ,
margin:10,
center:true,
});
Html :
<div class="owl-carousel owl-theme" id="owl-demo">
<div>
<img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 1">
</div>
<div>
<img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide2">
</div>
<div>
<img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide3">
</div>
</div>
style:
#owl-demo .owl-item div{
padding:5px;
}
#owl-demo .owl-item img{
display: block;
width: 100%;
height: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
how could I make this like that image and put that circle and next/prev button?
Change your html, add block navigation
<div class="owl-carousel owl-theme" id="owl-demo">
<div>
<img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 1">
</div>
<div>
<img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 2">
</div>
<div>
<img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 3">
</div>
</div>
<div class="owl-carousel__nav">
<div class="owl-carousel__prev">prev</div>
<div class="owl-carousel__next">next</div>
</div>
Add to JS this code:
$('.owl-carousel__next').click(() => owl.trigger('next.owl.carousel'))
$('.owl-carousel__prev').click(() => owl.trigger('prev.owl.carousel'))
Example
https://codepen.io/victoriya-dev/pen/XWXPxXq
Related
Problem that I'm facing is that the slider images are not responsive... I don't have a clue what I'm doing wrong, I followed the instructions from the demos on the slick.js web page.
What I want to achieve: https://solarsystem.nasa.gov/planets/overview/ (scroll over to the footer, there is a 3 planet slider (9 images in total), image has a html a tag and there is text below the image).
Image of my issue:
https://i.stack.imgur.com/H1gWd.png
See what I want to happen when resizing the browser:
https://solarsystem.nasa.gov/planets/overview/
Maybe useful information: When I put img tag without it being in a div or a tag it works perfectly...
JS/Jquery:
$('.slider-inner').slick({
arrows: true,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
HTML:
<head>
<link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick-
theme.css"/>
<link rel="stylesheet" href="style.css" />
</head>
<footer>
<h2>More Locations</h2>
<div class="slider-inner">
<div class="slider-item">
<a href="jupiter.html">
<img src="../img/slide1.png">
</a>
</div>
<div class="slider-item">
<a href="earth.html">
<img src="../img/slide2.png">
</a>
</div>
<div class="slider-item">
<a href="mercury.html">
<img src="../img/slide3.png">
</a>
</div>
<div class="slider-item">
<a href="mars.html">
<img src="../img/slide4.png">
</a>
</div>
<div class="slider-item">
<a href="venus.html">
<img src="../img/slide5.png">
</a>
</div>
<div class="slider-item">
<a href="saturn.html">
<img src="../img/slide6.png">
</a>
</div>
<div class="slider-item">
<a href="uranus.html">
<img src="../img/slide7.png">
</a>
</div>
<div class="slider-item">
<a href="neptune.html">
<img src="../img/slide8.png">
</a>
</div>
<div class="slider-item">
<a href="moon.html">
<img src="../img/slide9.png">
</a>
</div>
</div>
</footer>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/slick-1.8.1/slick/slick.min.js"></script>
CSS:
footer {
padding-top: 10%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
font-family: 'Gayathri', sans-serif;
}
footer h2 {
font-family: 'Source Sans Pro', sans-serif;
color: white;
text-align: center;
font-size: 40px;
}
Slick was a really nice slider, but it’s 2020, even the developer doesn’t do anything with it anymore for years. My advice is to stop using Slick and JQuery.
I am working on a project made in Angular 8 & want to use a third-party library such as ngx-slick-carousel and everything is working fine but I have thumbnail carousel, where an option like asNavFor, see the below attributes
imagesSlider = {
speed:300,
slidesToShow:1,
slidesToScroll:1,
cssEase:'linear',
fade:true,
autoplay: true,
draggable:true,
prevArrow:'.client-feedback .prev-arrow',
nextArrow:'.client-feedback .next-arrow',
asNavFor:".client-thumbnails",
};
thumbnailsSlider = {
speed:300,
slidesToShow:5,
slidesToScroll:1,
cssEase:'linear',
autoplay: true,
centerMode:true,
draggable:false,
focusOnSelect:true,
asNavFor:".feedback-slides .client-feedback",
prevArrow:'.client-thumbnails .prev-arrow',
nextArrow:'.client-thumbnails .next-arrow',
};
and the HTML looks like
<div class="feedback-slides">
<div class="client-feedback">
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="imagesSlider">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
</div>
<div class="client-thumbnails">
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="thumbnailsSlider ">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
as above codes not working & showing an error in the console like
Uncaught TypeError: Cannot read property 'getSlick' of undefined
If I remove the option asNavFor error will disappear but thumb click doesn't work anymore.
What can I do now?
Thanks
You are referencing the wrong classes in asNavFor. It needs to be the class name of the ngx-slick-carousel instance.
Try this and let me know.
<div class="feedback-slides">
<div class="client-feedback">
<ngx-slick-carousel
class="carousel feedback"
#slickModal="slick-carousel"
[config]="imagesSlider">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
</div>
<div class="client-thumbnails">
<ngx-slick-carousel
class="carousel thumbs"
#slickModal="slick-carousel"
[config]="thumbnailsSlider ">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
imagesSlider = {
speed:300,
slidesToShow:1,
slidesToScroll:1,
cssEase:'linear',
fade:true,
autoplay: true,
draggable:true,
prevArrow:'.client-feedback .prev-arrow',
nextArrow:'.client-feedback .next-arrow',
asNavFor:".thumbs",
};
thumbnailsSlider = {
speed:300,
slidesToShow:5,
slidesToScroll:1,
cssEase:'linear',
autoplay: true,
centerMode:true,
draggable:false,
focusOnSelect:true,
asNavFor:".feedback",
prevArrow:'.client-thumbnails .prev-arrow',
nextArrow:'.client-thumbnails .next-arrow',
};
Try this:
<div class="feedback-slides">
<div class="client-feedback">
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="imagesSlider">
<div ngxSlickItem *ngFor="let slide of slides" id="client-feedback" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
</div>
thumbnailsSlider = {
speed:300,
slidesToShow:5,
slidesToScroll:1,
cssEase:'linear',
autoplay: true,
centerMode:true,
draggable:false,
focusOnSelect:true,
asNavFor:"#client-feedback",
prevArrow:'.client-thumbnails .prev-arrow',
nextArrow:'.client-thumbnails .next-arrow',
};
I have a slider (owl slider - https://owlcarousel2.github.io/OwlCarousel2/index.html) . The slider has images as items, displaying 3 items per slide. Above the slider I have a title which will change when certain item from the slider is active.
<h6>
PROJECT PARTNERS <!-- this should changed to LOCAL PARTNER when 5th ITEM is active -->
</h6>
<div id="partner" class="partners owl-carousel">
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-1.jpg" style="vertical-align:middle;" width="150" height="150" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-2.jpg" style="vertical-align:middle;" width="150" height="110" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-3.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-4.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-5.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-6.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.partners').owlCarousel({
center: false,
items:1,
loop:false,
autoWidth: true,
margin:70,
responsive:{
600:{
items:3,
autoWidth: true,
margin:200
}
}
});
</script>
How can I do this?
$('.partners').owlCarousel({
center: false,
items: 1,
loop: false,
autoWidth: true,
margin: 70,
responsive: {
600:{
items:3,
autoWidth: true,
margin:200
}
},
onChange: function (event) {
console.log(event);
if (event.item.index == 2) {
$("h6").text("chnaged title");
}
}
})
https://jsfiddle.net/vdqj60a5/1/
I am using fade slick slider i want to display one image at a time but my slider is not working:
<head>
<link href="js/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="js/slick.css" rel="stylesheet" type="text/css" />
<script src="js/slick.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="fade">
<div>
<img src="images/ProductName/6.jpg" alt="" />
<img src="images/ProductName/6.jpg" alt="" />
</div>
</div>
</form>
</body>
Above code is working to display image but slider is not applying.I want image to be display one by one but it is not working
You need to add Jquery Library. "". Try this.
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".variable").slick({
dots: true,
infinite: true,
variableWidth: true
});
});
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
</section>
<section class="variable slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/200x300?text=2">
</div>
<div>
<img src="http://placehold.it/100x300?text=3">
</div>
<div>
<img src="http://placehold.it/200x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/300x300?text=6">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
First you have to add jquery , then remove the div enclosing the two images , that's why it shows the images at same time , also add $.ready function to your script to ensure dom loading.
Here is a Fiddle
$( document ).ready(function(){
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div style="background-color:gray">
<form id="form1" runat="server">
<div class="fade" style="width:40%;margin:auto">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" />
<img src="http://www.jqueryscript.net/images/Cross-browser-Image-Carousel-Plugin-For-jQuery-carouselOnPC.jpg" alt="" />
</div>
</form>
</div>
I'm making a image slider using Owl Carousel 2 and I have it all working but I'm currently trying to add text pagination to the controls for the slider. I added the title attribute to the HTML on the images and used javascript to populate the pagination for the slider.
Here is the HTML:
<div class="rri-carousel owl-theme owl-carousel owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-9192px, 0px, 0px); transition: 0s; -webkit-transition: 0s; width: 13788px;">
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt & Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt & Sand">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" title="Commercial" data-thumb="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" alt="Commercial">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
</div>
</div>
<div class="owl-item active" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt & Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt & Sand">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
</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>Agriculture</span></div>
<div class="owl-dot"><span>Equine</span></div>
<div class="owl-dot"><span>Salt & Sand</span></div>
<div class="owl-dot"><span>Fertilizer</span></div>
<div class="owl-dot active"><span>Commercial</span></div>
</div>
</div>
</div>
and here is my javascript code :)
$(document).ready(function () {
var owl = $('.rri-carousel');
function customPager() {
$.each($(owl).find('.item'), function (i) {
var titleData = $(this).find('img').attr('title');
console.log(titleData);
var paginationLinks = $('.owl-controls .owl-dots .owl-dot span');
$(paginationLinks[i]).append(titleData);
});
}
owl.owlCarousel({
loop : true,
items : 1,
nav : false,
autoplay : true,
onInitialized : customPager
});
});
But when it gets displayed on the screen here is the order..
The order is completely wrong somehow..
I added a console output to display the titles as they are added to the pager and here is the order which is wrong as well :/
Agriculture
Equine
Salt & Sand
Fertilizer
Commercial
Agriculture
Equine
Salt & Sand
Fertilizer
Create an array before the onInitialized event:
$(document).ready(function () {
var owl = $('.rri-carousel');
var dots_label = [];
$.each($(owl).find('.item'), function (i) {
dots_label.push($(this).find('img').attr('title'));
});
function customPager() {
$.each($(owl).find('.owl-dot'), function (i) {
var paginationLinks = $('.owl-controls .owl-dots .owl-dot span');
$(paginationLinks[i]).append(dots_label[i]);
});
}
owl.owlCarousel({
loop : true,
items : 1,
nav : false,
autoplay : true,
onInitialized : customPager
});
});