Develop Reference

slide page always exhibit in JS swiper

i start to learn about Web and make example page
i use swiper in javascript and that swiper is work, but all slide exhibit when that slide does not in center.
what attribute need to code?
Actual page
and this my js page
new Swiper('.notice-line .swiper-container', {
direction: 'vertical',
autoplay: true,
loop: true
});
html page
<div class="inner__left">
<h2>공지사항</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내
</div>
<div class="swiper-slide">
[당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트
</div>
<div class="swiper-slide">
스타벅스커피 코리아 애플리케이션 버전 업데이트 안내
</div>
<div class="swiper-slide">
[당첨자 발표] 뉴이어 전자영수증 이벤트
</div>
</div>
</div>
<a href="javascript:void(0)" class="notice-line__more">
<div class="material-icons">
<span class="material-symbols-outlined">add_circle</span>
</div>
</a>
</div>

Give an item the class of anothers item's children with jQuery or JS ( owl-carousel)

This is my problem.
I'm using the owl.carrousel MIT libraries in my page.
This libraries automatly creates a div to give it the class "active" when it has to be shown.
I want to set a different background in the carrousel section when any different "owl-item" is active.
This is the html code as i have it on my index.html document:
<section id="testimonials">
<div class="container">
<div class="owl-carousel testimonials-carousel">
<div class="testimonial-item Titem1">
<h3>First carousel item</h3>
</div>
<div class="testimonial-item Titem2">
<h3>Second carousel item</h3>
</div>
<div class="testimonial-item Titem3">
<h3>Third carousel item</h3>
</div>
<div class="testimonial-item Titem4">
<h3>Fourth carousel item</h3>
</div>
</div>
</div>
</section>
This is the html code on the page after the owl.carrousel libraries does it's magic:
<section id="testimonials">
<div class="container">
<div class="owl-carousel testimonials-carousel">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item active">
<div class="testimonial-item Titem1">
<h3>First carousel item</h3>
</div>
</div>
</div>
</div>
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="testimonial-item Titem2">
<h3>Second carousel item</h3>
</div>
</div>
</div>
</div>
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="testimonial-item Titem3">
<h3>Third carousel item</h3>
</div>
</div>
</div>
</div>
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="testimonial-item Titem4">
<h3>Fourth carousel item</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I want to use the div with class="owl-item active" child's (the active testimonial-item that is being showed) to give a class to the section element id="testimonials", so each time any different .owl-item gets the class .active, the background of the section changes as well.
I tried to do it with javascript and with jQuery but nothing worked for me, mabe because i'm still a noob xD.
For example this is the last thing i tried
$('#testimonials').addClass( $('.owl-item.active > .testimonial-item').attr("class") );
So if any GOD of JS or jQuery can help me pls :V
I don´t really know what im doing.
Thank you for reading till the end ;)

The code of Daddys Code worked well, but actualy fast enough to give the class to the "#testimonials" even before the class "active" changes from an "owl-item" to another, so it gave it the class from the last "owl-item active" it can be fixed easily using "translated.owl.carousel" instead of "change.owl.carousel":
$(".owl-carousel").owlCarousel();
var owl = $(".owl-carousel");
owl.owlCarousel();
owl.on("translated.owl.carousel", function (event) {
$("#IDi").removeClass();
$("#IDi").addClass($(".owl-item.active > .testimonial-item").attr("class"));
});

As I am able to understand your question, add below code to your js file
$(".owl-carousel").owlCarousel();
var owl = $(".owl-carousel");
owl.owlCarousel();
owl.on("translated.owl.carousel", function (event) {
$("#testimonials").removeClass();
$("#testimonials").addClass(
$(".owl-item.active > .testimonial-item").attr("class")
);
});

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
}
}
});

Initialize Slick Slider by the image just clicked

I need a feature to finish my slider image. I've used Slick.js to build my slider and a little HTML and CSS to be displayed inside a modal that is fired up when the user clicks in an static image. Well, I need the first slide shown in the slider to be the one just clicked by the user. I think this is a very common feature in sliders of the world. But I haven't found the way of doing it after a lot of searching. I'm asking because maybe someone has used Slick before and he has had the same situation. I guess the setting I have to play with is initialSlide, but no idea how to store the reference of the image at the same time slider is initialized. I'm aware is a tricky problem but I'm asking just in case.Thank you in advanced
This is how I initialize the slider
<script>
$(document).ready(function(){
$('.slider-gallery').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1
});
$(".slick-prev").hide();
$(".slick-next").hide();
});
$('#prev').click(function(){
$(".slider-gallery").slick('slickNext');
});
$('#next').click(function(){
$(".slider-gallery").slick('slickPrev');
});
</script>
This is the html of the static gallery image
<div class="large-6 medium-6 small-12 columns">
<div class="main-img"><a href="#openGallery">
<img src="assets/images/2.png" alt=""></a>
</div>
<div class="thumbnails">
<img class="large-4 medium-4 small-4 columns" src="assets/images/1.png" alt="">
<img class="large-4 medium-4 small-4 columns" src="assets/images/2.png" alt="">
<div class="thumbnail-hover"><a href="#openGallery">
<div class="hover-gallery">23fotos</div>
<img class="large-4 medium-4 small-4 columns" src="assets/images/3.png" alt=""></a>
</div>
</div>
And this the html of the slider
<div id="openGallery" class="item-gallery">
<div class="row">
X
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button>
</div>
<div class="large-10 medium-10 columns">
<div class="slider-gallery">
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/1.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/2.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/3.png">
</div>
</div>
</div>
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button>
</div>
</div>
</div>

One way to do so is to use the slickGoTo() function attached to each click on image.
<img class="small-4 columns" src="assets/images/1.png" alt="" onclick="$('.slider-gallery').slickGoTo(0)">
<img class="small-4 columns" src="assets/images/2.png" alt="" onclick="$('.slider-gallery').slickGoTo(1)">
Notes:
The first slide is 0, the second is 1 and so...
You are using Foundation which is awesome. You don't need to add medium-4 and large-4 as you did when you have small-4. The Foundation rule is that "small" = small and larger.
If this is not working try the following syntax instaed:
onclick="$('.slider-gallery').slick('slickGoTo', 0);"
This depends on the slick version you're using.