Develop Reference

what is the best way to create a notifications card vertical carousel with animating the first card to slidin?

I am trying to make an automatic notification cards, the card should slid in from the right of the screen with animation the second card will slid in the same way and push the previous card down, exactly like this website https://muzzleapp.com/
i have tried to create it with swiperjs but i cant animate the card to slide in from the left and the auto play of the carousel is not like the one in the website https://muzzleapp.com/
here is my code
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
reverseDirection: true,
loop: true,
slidesPerView: 6,
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
autoplay: {
delay: 1500,
},
});
and this is the html
<div class="col-lg-5">
<img class="main-img" src="./Assest/Group 14.png" alt="">
</div>
<div class="col-lg-3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column mt-3">
<h2 class="name">Derek Chin</h2>
<p class="card-info">Aiseh new PS5 ah, swee ah bro. But now pokai how?</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column">
<h2 class="name">Derek Chin</h2>
<p class="card-info" class="card-info">Aiseh new PS5 ah, swee ah bro. But now
pokai how?</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column">
<h2 class="name">Derek Chin</h2>
<p class="card-info">Aiseh new PS5 ah, swee ah bro. But now pokai how?</p>
</div>
</div>
</div>
any one has a better way for me to reach my goal please ,,,, thank you

Slick JS - Only first slide is visible, others always hidden

I created a slider containing a divs and text. But on slide change only the first slide is shown, rest are hidden when the slide is changed.
Please check this working fiddle, showcasing the issue : https://jsfiddle.net/rp82g5c1/
Code is used to intialise the Slick JS :
$('#main-content').slick({
arrows: false,
slidesToShow: 1,
fade: true,
adaptiveHeight: true,
responsive: [{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: false,
variableWidth: false
}
}]
});
My HTML :
<div class="main-wrapper">
<div class="faq-controls">
<div class="faq-navigation back">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="faq-navigation forward">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
</div>
<div id="main-content">
<div class="single-qa">
<div class="content-wrap">
<div class="question-wrap">
<div class="question">
<h2 class="text-center">Q.</h2>
<h3>First Question?</h3>
</div>
</div>
<div class="answer-wrap">
<div class="answer">
<h2 class="text-center">A.</h2>
<p>First Answer.. Blah Blah.</p>
</div>
</div>
</div>
</div>
<div class="single-qa">
<div class="content-wrap">
<div class="question-wrap">
<div class="question">
<h2 class="text-center">Q.</h2>
<h3>Second Question?</h3>
</div>
</div>
<div class="answer-wrap">
<div class="answer">
<h2 class="text-center">A.</h2>
<p>Second Answer.. Blah Blah.</p>
</div>
</div>
</div>
</div>
</div>
</div>

The reason it is not working is because you have not include the slick.css in your document. You should include like below:
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
Here is the Working JSFiddle

How to show pagination dots in owl carousel

I am using Owl Carousel 2. I want to display a dot for every item, but I want to show 5 dots at a time. Can anyone suggest to me how I will do this? Thanks.
HTML:
<div id="owl-demo" class="owl-carousel">
<div class="item">
<img src="images/banner/A.png" alt="A"/>
</div>
<div class="item">
<img src="images/banner/B.png" alt="B"/>
</div>
<div class="item">
<img src="images/banner/C.png" alt="C"/>
</div>
<div class="item">
<img src="images/banner/D.png" alt="D"/>
</div>
<div class="item">
<img src="images/banner/E.png" alt="E"/>
</div>
<div class="item">
<img src="images/banner/F.png" alt="F"/>
</div>
</div>
<div id="dots" class="owl-carousel">
<div class="item"><span>A</span></div>
<div class="item"><span>B</span></div>
<div class="item"><span>C</span></div>
<div class="item"><span>D</span></div>
<div class="item"><span>E</span></div>
<div class="item"><span>F</span></div>
</div>
JS:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true
});
});

Just change your JS to:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true,
dotsEach: true
});
});

hiding next and previous buttons from a single image in carousel

I am working on a website in which I want to place next and previous buttons on images so that its easy for the users to navigate through the images.
The php code which I have used with carousel classes are:
<div class="text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->media))
{
foreach ($data['item']->media as $media)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$media->url.'">
</div>
</div>';
//'.$media->url.';
}
}
?>
</div>
</div>
The HTML code rendered at the front end is:
<div id="owl_item_images" class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer owl-height" style="height: 350px;">
<div class="owl-stage" style="transform: translate3d(-7677px, 0px, 0px); transition: 1.5s; width: 8530px;">
<div class="owl-item">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item active" style="width: 853px;">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
-
-
-
-
<div class="owl-dot active"><span></span></div>
</div>
</div>
Problem Statement:
I am wondering what changes I should do in the PHP code (as html code is rendered at the front end) above so that previous/next buttons are visible.
On removing display none I can see next and previous buttons but I am wondering still how I can hide next and previous buttons when there is a single image in the carousel.
HTML:
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
CSS:
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
/* display: none; */
}

According to the API documentation there is a change.owl.carousel event to change the options.
$('#owl_item_images').trigger('change.owl.carousel', { nav: true });
EDIT: You can update the JavaScript in the custom.js file. The code below includes the nav property and sets its value to true.
// Items page items images carousel [Line # 62]
var owlItemImages = $('#owl_item_images');
owlItemImages.owlCarousel({
items: 1,
nav: true, // enable the nav buttons
dots: true,
autoHeight: true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1,
loop:false
}
}
});

owl carousel loop:true cannot applied

I would like to implement the loop:true option in my owl carousel, but actually when I overwrite the old owl.carousel.min file the entire slider disabled, but it works fine with old version owl.carousel.min file without loop.
Can anyone help me how to overcome from this one.
$("#owl-example4").owlCarousel({
navigation : true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
autoPlay: 3500, //Set AutoPlay to 3 seconds
autoplayTimeout:2500,
items :1,
loop: true,
singleItem: true,
autoHeight: true,
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
});
html as follows
<section class=".banner" id="banner"><!--main-section banner-->
<div id="owl-example4" class="owl-carousel fadeInRight animated wow">
<div class="item darkCyan text-center hpsliderimg1">
<img src="img/slide1.jpg" class="img-responsive center-block"/>
</div>
<div class="item darkCyan text-center hpsliderimg2">
<img src="img/slide2.jpg" class="img-responsive center-block"/>
</div>
<div class="item darkCyan text-center hpsliderimg3">
<img src="img/slide3.jpg" class="img-responsive center-block"/>
</div>
<!--<div class="item darkCyan text-center hpsliderimg4">
<img src="img/slide-4.jpg" class="img-responsive"/>
</div>-->
</div>
</section>