Displaying the title based on slider item that is in center - javascript

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/

Related

Unable to create multiple instance of tiny slider

I have been trying to add multiple instances of tiny slider. But it only works on the first div.
I wanna add two sliders with the same properties in two different div. First slider works fine but second slider get broken
let tnsslider = tns({
container: '.my-slider',
items: 3,
gutter: 20,
edgePadding: 20,
controlsPosition: 'bottom',
mouseDrag: true,
autoplay: true,
autoplayButtonOutput: false,
controlsContainer: '#custom-control',
nav: false,
responsive: {
0 : {
items: 1
},
768 : {
items: 2
},
1440 : {
items: 3
}
}
});
let tnsslider1 = tns({
container: '.my-slider',
items: 3,
gutter: 20,
edgePadding: 20,
controlsPosition: 'bottom',
mouseDrag: true,
autoplay: true,
autoplayButtonOutput: false,
controlsContainer: '#custom-control',
nav: false,
responsive: {
0 : {
items: 1
},
768 : {
items: 2
},
1440 : {
items: 3
}
}
});
This is my HTML structure which i have been using i created two different divs for both the sliders but only first one works as expected.
<div class="men-section">
<h2>Men</h2>
<div class="tnsslider">
<ul class="control" id="custom-control">
<li class="prev">
<i class="fas fa-angle-left fa-2x"></i>
</li>
<li class="next">
<i class="fas fa-angle-right fa-2x"></i>
</li>
</ul>
<div class="my-slider">
<img src="/assets/img/men-img.jpg" alt="" />
<img src="/assets/img/men-img (2).jpg" alt="" />
<img src="/assets/img/men-img (3).jpg" alt="" />
<img src="/assets/img/men-img (4).jpg" alt="" />
<img src="/assets/img/men-img (5).jpg" alt="" />
<img src="/assets/img/men-img (6).jpg" alt="" />
<img src="/assets/img/men-img (7).jpg" alt="" />
<img src="/assets/img/men-img (8).jpg" alt="" />
</div>
</div>
</div>
<div class="women-section">
<h2>Women</h2>
<div class="tnsslider1">
<ul class="control" id="custom-control">
<li class="prev">
<i class="fas fa-angle-left fa-2x"></i>
</li>
<li class="next">
<i class="fas fa-angle-right fa-2x"></i>
</li>
</ul>
<div class="my-slider">
<img src="/assets/img/men-img.jpg" alt="" />
<img src="/assets/img/men-img (2).jpg" alt="" />
<img src="/assets/img/men-img (3).jpg" alt="" />
<img src="/assets/img/men-img (4).jpg" alt="" />
<img src="/assets/img/men-img (5).jpg" alt="" />
<img src="/assets/img/men-img (6).jpg" alt="" />
<img src="/assets/img/men-img (7).jpg" alt="" />
<img src="/assets/img/men-img (8).jpg" alt="" />
</div>
</div>
</div>

You could try to change your second div class name, and put the same in your tnsslider1.container
Edit : try to change your id and controlsContainer

How to make a owl carousel with button next/pre

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

asNavFor not working ngx-slick-carousel in Angular 8

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',
};

function issue in owl carousal

jQuery(document).ready(function () {
(function (jQuery) {
jQuery(".mon-owl-carousel").owlCarousel({
loop: !0,
nav: !1,
items: !0,
navText: !1,
autoplay: !0,
smartSpeed: 4e3,
dots: !0,
autoWidth: !1,
responsive: {
0: {
items: 1,
loop: !0,
margin: 0
},
480: {
items: 2,
loop: !0,
margin: 0
},
768: {
items: 3,
loop: !0,
margin: 60
},
1e3: {
items: 4,
loop: !0
}
}
});
})(jQuery);
});
<div class="mon-owl-carousel owl-carousel">
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Profile" title="Monest Agent Profile" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-1.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Property Listings" title="Monest Agent Property Listings" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-2.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Drive" title="Monest Agent Drive" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-3.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-3.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-4.png">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="<?php echo get_site_url(); ?>/wp-content/uploads/2019/03/monest-slider-screen-5.png">
</div>
Hello guys, I'm using this script for my project. But here saying TypeError: jQuery(...).owlCarousel is not a function in inspect elements. How can we solve this? :(
I have added my html and script above for more clarification. Please go through this. Thanks.

I tried reproduce your code, it worked. May be you put owlCarousel before jQuery.
jQuery(document).ready(function () {
(function (jQuery) {
jQuery(".mon-owl-carousel").owlCarousel({
loop: !0,
nav: !1,
items: !0,
navText: !1,
autoplay: !0,
smartSpeed: 4e3,
dots: !0,
autoWidth: !1,
responsive: {
0: {
items: 1,
loop: !0,
margin: 0
},
480: {
items: 2,
loop: !0,
margin: 0
},
768: {
items: 3,
loop: !0,
margin: 60
},
1e3: {
items: 4,
loop: !0
}
}
});
})(jQuery);
});
<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.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<div class="mon-owl-carousel owl-carousel">
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Profile" title="Monest Agent Profile" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Property Listings" title="Monest Agent Property Listings" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Drive" title="Monest Agent Drive" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>
<div class="item">
<img data-no-lazy="1" alt="Monest Agent Nav menu" title="Monest Agent Nav menu" src="https://i.pinimg.com/originals/a5/13/a0/a513a04aa1f6a6ff689d2d71038d682a.jpg">
</div>

How to appear sliders when using table tag in html

Iam tyring to use this slider: http://www.menucool.com/javascript-image-slider
BUT when Iam trying to use a code like this, iam unable to get the output..
<table>
<tr>
<td>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.google.com" target="_blank">
<img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="JSImageSlider/images/image-slider-5.jpg"/>
</div>
</div>
</td>
<td>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.google.com" target="_blank">
<img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="JSImageSlider/images/image-slider-5.jpg"/>
</div>
</div>
</td>
</tr>
</table>

First: double your slider id. ID = identity of element! Mark sliderFrame as class. Like this:
<table>
<tr>
<td>
<div class="sliderFrame">
<div id="slider">
<a href="http://www.google.com" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg"/>
</div>
</div>
</td>
<td>
<div class="sliderFrame">
<div id="slider2">
<a href="http://www.google.com" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg"/>
</div>
</div>
</td>
</tr>
</table>
Second: change your css file:
.sliderFrame {position:relative;width:700px;margin: 0 auto;}
#slider, #slider2 {
width:700px;height:306px;
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img, #slider2 img {
position:absolute;
border:none;
display:none;
}
And the last one: your js code must implement another instance of your slider:
var sliderOptions=
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
license: "free"
};
var sliderOptions2 =
{
sliderId: "slider2",
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs2",
license: "free"
};
var imageSlider=new mcImgSlider(sliderOptions);
var imageSlider2=new mcImgSlider(sliderOptions2);
Thats all. Table tag is innosent =)

Categories