I have a doubt because the documentation is not very clear, I want to click on the next button on the right side and go back with the left button, because here in my code, it can go to the next one and come back with the next button I would like just 1 click to go to the side and the other button to go back my EXAMPLE:
I AM USING SWIPER TO DO THE ACT:
var swiper = new Swiper(".slide-content", {
slidesPerView: 3,
spaceBetween: 25,
loop: true,
centerSlide: 'true',
fade: 'true',
grabCursor: 'true',
slidesPerGroup: 3,
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next" ,
prevEl: ".swiper-button-prev",
},
breakpoints:{
0: {
slidesPerView: 1,
},
520: {
slidesPerView: 2,
},
950: {
slidesPerView: 3,
},
},
});
<div class="slide-container swiper">
<div class="sldsss">
<div class="imgg">
<img src="/static/aaa/dr.png" alt="" class="card-img">
</div>
<div class="slide-content">
<div class="card-wrapper swiper-wrapper">
<div class="card swiper-slide">
<div class="pscc">
<div id="cap1" class="card-image">
<img src="/static/aaa/cp.png" alt="" class="card-img">
</div>
</div>
<video id="vdd1" class="vdd1" src="/static/aaa/videodr.mp4" controls>
<p>Seu navegador não suporta o vídeo. aqui está um link para o video instantâneo.</p>
</video>
<div onclick="ply1()" id="pl1" class="pl1">
<a href="##">
<ion-icon class="pll1" name="play-circle-outline"></ion-icon>
</a>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<div id="cap2" class="card-image0">
<img src="/static/aaa/cp2.png" alt="" class="card-img0">
</div>
</div>
<video id="vdd2" class="vdd2" src="/static/aaa/vd2.mp4" controls>
<p>Seu navegador não suporta o vídeo. aqui está um link para o video instantâneo.</p>
</video>
<div id="pl2" onclick="ply2()" class="pl2">
<a href="##">
<ion-icon class="pll1" name="play-circle-outline"></ion-icon>
</a>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<div id="cap3" class="card-image1">
<img src="/static/aaa/cp3.png" alt="" class="card-img1">
</div>
</div>
<video id="vdd3" class="vdd3" src="/static/aaa/vd3.mp4" controls>
<p>Seu navegador não suporta o vídeo. aqui está um link para o video instantâneo.</p>
</video>
<div id="pl3" onclick="ply3()" class="pl3">
<a href="##">
<ion-icon class="pll1" name="play-circle-outline"></ion-icon>
</a>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<div class="card-image2">
<img src="/static/aaa/cp4.jpg" alt="" class="card-img2">
</div>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<div class="card-image3">
<img src="/static/aaa/cp5.jpg" alt="" class="card-img3">
</div>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<div class="card-image4">
<img src="/static/aaa/cp6.jpg" alt="" class="card-img4">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next swiper-navBtn"></div>
<div class="swiper-button-prev swiper-navBtn"></div>
<div class="swiper-pagination"></div>
</div>
</div>
Simple, my friend, just disable the loop, so your next will no longer work, I believe that's it.
** loop: false, **
var swiper = new Swiper(".slide-content", {
slidesPerView: 3,
spaceBetween: 25,
loop: false,
centerSlide: 'true',
fade: 'true',
grabCursor: 'true',
slidesPerGroup: 3,
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next" ,
prevEl: ".swiper-button-prev",
},
breakpoints:{
0: {
slidesPerView: 1,
},
520: {
slidesPerView: 2,
},
950: {
slidesPerView: 3,
},
},
});
Related
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',
};
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>
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..