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',
};
Related
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
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/
how to responsive owl carousel with data attributes?
some thing like this...
<div class="owl-carousel data-carousel" data-carousel='{"responsive": {0:{"items":1},768:{"items":2},992:{"items":3}}}'>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
</div>
and
var $carousel = $('.data-carousel[data-carousel]');
if ($carousel.length) {
$carousel.each(function() {
$(this).owlCarousel($(this).data('carousel'));
});
}
in owl carousel documentations we have like this ...
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
});
but in my way, i want a new way to responsive owl carousel with data attributes. i see some snippets like this ...
<div class="owl-carousel" data-carousel='{"breakpoint":"0:1,992:2"}'></div>
We can do this like
<div class="your-custom-class">
<ul class="tab-list owl-carousel nav-style5" data-nav="true" data-autoplay="true" data-dots="false" data-loop="true"
data-margin="30" data-responsive='{"0":{"items":1},"600":{"items":2},"1000":{"items":6}}'>
<li class="custom-class2">
<div class="custom-class3">
<div class="custom-class4">
<img src="/src/images/img1.png" alt="">
<div class="gorup-button">
<a href="#" class="wishlist">
<i class="fa fa-heart"></i>
</a>
</div>
</div>
<div class="product-info">
<h3 class="product-name">
Product Name
</h3>
<span class="price">
<ins>₹300</ins>
<del>₹400</del>
</span>
ADD TO WISHLIST
</div>
</div>
</li>
</ul>
</div>
im working on something that I need to use both Fullpage.js at jQuery Cycle at the same time. Now what I want to happen is to have multiple Fullpage that would slide if I click the navigation with jCycle. My javascript codes goes like this:
$(document).ready(function() {
$('#firstpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed: 1000
});
var titles = ['FirstPage','SecondPage'];
$('#list')
.before('<div id="nav">')
.cycle({
fx: 'scrollRight',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '' + titles[index] + '';
}
});
});
and my html
<div id="list">
<div>
<div id="firstpage">
<div class="section " id="section0">
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
</div>
<div class="section" id="section2">
<div class="intro">
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<div class="section" id="section3">
<div class="intro"></div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
</div>
</div>
<div>
<div id="secondpage">
<div class="section" id="section4">
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section5">
</div>
<div class="section" id="section6">
<img src="imgs/example2.png" alt="example" />
</div>
</div>
</div>
The firstpage is properly working but when is try to navigate for the secondpage scrolling is no longer working, but when I try to add something like this in the javascript, scrolling on both page is not working.
$('#secondpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed: 1000
});
Help me guys, thanks in advance..
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);