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>
Related
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,
},
},
});
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 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 am trying to change the width of the images in my owl-carousel.
<!-- Slider -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="owl-carousel owl-carousel-fullwidth">
<div class="item"><img src="images/frontview.jpg" alt="image"></div>
<div class="item"><img src="images/entry.jpg" alt="image"></div>
<div class="item"><img src="images/register.jpg" alt="image"></div>
<div class="item"><img src="images/bulk2.jpg" alt="image"></div>
<div class="item"><img src="images/herbs3.jpg" alt="image"></div>
<div class="item"><img src="images/overhead.jpg" alt="image"></div>
</div>
</div>
</div>
</div>
<!-- Slider -->
If I right-click on the image to inspect the element, it this inline style:
<div class="owl-item" style="width: 960px; margin-right: 0px;">
The only information I can find about width in the docs is about the autoWidth, which doesn't help me.
Any ideas? Thank you!
var owlCarouselFeatureSlide = function() {
$('.owl-carousel').owlCarousel({
animateOut: 'fadeOut',
autoplay: true,
autoplayTimeout: 5000,
autoHeight: true,
items: 1,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
// smartSpeed: 500,
navText : ["<i class='icon icon-chevron-left'></i>","<i class='icon icon-chevron-right'></i>"]
});
};
Owl Carousel dynamically sets the widths of div.item when the browser window resizes, but not elements within each div.item. So, you can provide CSS to do that. Since you're already using Bootstrap, have a look at these CSS classes that it provides https://getbootstrap.com/docs/4.0/content/images/
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/