How can I implement autoplay for slides if use the fullPage.js plugin?
<div id="fullpage">
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
Open Google and type "autoplay fullpage.js".
Click on the first result and follow the instructions:
$(document).ready(function () {
$('#fullpage').fullpage({
afterRender: function () {
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 1000);
}
});
});
Demo online
Related
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>
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")
);
});
I have two owl carousel. And one is over the other. One is image with some content and other is only content. And the both slider needs to change together.
This the code below for content slider
<div id="owkey-content-slider" class="owl-carousel">
<div class="item">
<div class="slider-content">
<h4>WE CREATE</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE BUILD</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE OFFER</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE DELIVER</h4>
</div>
</div>
</div>
This is the codes for image slider
<div class="header-bg-image-slide">
<div id="owkey-bg-slider" class="owl-carousel">
<div class="item">
<img src="img/owkey-slider-2.jpg">
<div class="number-item">01</div>
</div>
<div class="item">
<img src="img/owkey-slider.jpg">
<div class="number-item">02</div>
</div>
<div class="item">
<img src="img/shutterstock_327808505.jpg">
<div class="number-item">03</div>
</div>
<div class="item">
<img src="img/owkey-head.png">
<div class="number-item">04</div>
</div>
</div>
And they are initialized in the same conditions/parameters. They are changing together. But, when button was clicked those buttons are for the image slider and that doesn't change the other slider's contents certainly.
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owkey-bg-slider, #owkey-content-slider");
owl.owlCarousel({
navigation : true,
navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"],
singleItem : true,
transitionStyle : "fade",
autoPlay: true,
touchDrag: false,
mouseDrag: false
});
})
</script>
And I think experienced owl carousel user can help me in this.
There are solution for this problem in here that is for any other kind of slider but not for owl carousel.
Use Flickity Slider, it's a much better slider plugin.
I am creating a page that has 4 different sections. In each section there are 2 buttons that hide/show 2 different divs. Right now it only works on the top div and when you click the buttons in the other 3 divs, they open the top div. The content is being pulled from wordpress posts. Here is the javascript I am using.
$(document).ready(function() {
$('.expander').on('click', function() {
if ($('#TableData').is(":visible")) {
$('#TableData').hide();
} else {
$('#TableData').show();
}
$('#TableData2').hide();
return false;
});
$('.expander2').on('click', function() {
if ($('#TableData2').is(":visible")) {
$('#TableData2').hide();
} else {
$('#TableData2').show();
}
$('#TableData').hide();
return false;
});
});
Here is the html:
<div class="popup-open">
<div class="icons-large"></div>
<div class="icons-large"></div>
<div class="title">Title</div>
WHAT'S IN THE BAG</br>
PLAYER HISTORY
</div>
</div>
<div id="TableData">
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<div class="row">
<a target="_blank" href="#">
<div class="image">
<img src="#" alt="">
<a target="_blank" class="product-name" href="" title=">">
</a>
</div>
</a>
</div>
</div>
CLOSE
</div>
</div>
</div>
<div id="TableData2">
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="player-biography">
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"></div>
</div>
CLOSE
</div>
</div>
</div>
I am trying to create a content slider same as here the only thing is that they have text and images and i want only images.
Basically on first page it shows thumbnails so when you click any of them it jumps to that particular slide.
I have tried and setup the slider with swiper jquery plugin but i couldn't make it to jump to specific slide here is my code:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)">
<div class="block">
Jumo to page 1
</div>
<div class="block">
Jumo to page 2
</div>
<div class="block">
Jumo to page 3
</div>
</div>
<div id="page2" data-page-number="2" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)"></div>
<div id="page3" data-page-number="3" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
<div id="page4" data-page-number="4" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
<div id="page5" data-page-number="5" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
<div id="page6" data-page-number="6" class="swiper-slide"><h1>THIS IS PAGE 6</h1></div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
effect: 'fade'
});
</script>
Jsfiddle here https://jsfiddle.net/yuv72u60/
Seeking help!
Thank you
HTML
<div class="block">
Jumo to page 1
</div>
<div class="block">
Jumo to page 2
</div>
<div class="block">
Jumo to page 3
</div>
JS
$(".block a").click(function(){
var index=$(this).attr('href');
swiper.slideTo(index);
});
The above mentioned are changes in have made to your JS fiddle in the HTML and JS section. index in the above js is the position of your page.
DEMO
There is an API in Slider itself for your requirement I have updated your Fiddle slightly for that API to work