I've edited the code provided from here to cater for two carousel without it being id dependent, which works fine, except that I can't get the tabs to work properly upon click. (E.g, removing the class "synced" and adding them onto the clicked tab properly.) Think I'm not doing something right with both function syncPosition and function left.
Where did I miss out, or did wrong?
HTML:
<!--Carousel 1-->
<div class="tabslider">
<div class="owl-carousel tabthumb">
<div class="item" >1</div>
<div class="item" >2</div>
<div class="item" >3</div>
<div class="item" >4</div>
<div class="item" >5</div>
</div>
<div class="owl-carousel tabcontent">
<div class="item">Content 1</div>
<div class="item">Content 2</div>
<div class="item">Content 3</div>
<div class="item">Content 4</div>
<div class="item">Content 5</div>
</div>
</div>
<!--Carousel 2-->
<div class="tabslider">
<div class="owl-carousel tabthumb">
<div class="item" >1</div>
<div class="item" >2</div>
<div class="item" >3</div>
<div class="item" >4</div>
</div>
<div class="owl-carousel tabcontent">
<div class="item">Content 1</div>
<div class="item">Content 2</div>
<div class="item">Content 3</div>
<div class="item">Content 4</div>
</div>
Script:
<script>
$(document).ready(function() {
$('.tabslider').each(function(){
var sync1 = $(this).children(".tabcontent");
var sync2 = $(this).children(".tabthumb");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
itemsTablet : [768,2],
itemsMobile : [479,2],
pagination:false,
navigation: false,
navigationText: [
"<i class='icon-arrow-left7'></i>",
"<i class='icon-uniE6E2'></i>"
],
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
// $(".tabthumb")
$(this).find(".tabthumb")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($(this).children(".tabthumb").data("owlCarousel") !== undefined){
left(current)
console.log(this)
}
}
$(this).children(".tabthumb").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function left(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
})
});
</script>
JS:
//remove the following(and its closing tag of course) :
$('.tabslider').each(function(){
//modify this part:
$(this).children(".tabthumb").on("click", ".owl-item", function(e)
{
//we modify our trigger to only apply to our current gallery, not all of them
e.preventDefault();
var number = $(this).data("owlItem");
//The navigation with the thumbnails
var $thumbnailNavWrapper = $(this).closest('your-thumbnail-navigation-class');
//the slider with the big images .prev or .next depending on
whether we find our slider before or next to the thumbnail navigation
$sync1 = $thumbnailNavWrapper.prev();
sync1.trigger("owl.goTo",number);
});
If the above is not enough and you need a thumbnail nav with a "centerized" style.
function center(number){
var sync2visible = $sync2.data("owlCarousel").owl.visibleItems;
var num = number;
if(num === sync2visible[0])
{
$sync2.trigger("owl.goTo", num-1);
}
else if(sync2visible.length <= 2)
{
$sync2.trigger("owl.goTo", num+1);
}
else
{
$sync2.trigger("owl.goTo", num-1);
}
}
Not sure if this will 100% help. Just made mine with the same issue.
Related
I have 2 identical div blocks on the page, inside of which there are several div blocks with different texts. It looks something like this:
<div class="dynamic_titles">
<div class="dynamic_title active">text 1</div>
<div class="dynamic_title inactive">text 2</div>
<div class="dynamic_title inactive">text 3</div>
<div class="dynamic_title inactive">text 4</div>
<div class="dynamic_title inactive">text 5</div>
</div>
<div class="dynamic_titles">
<div class="dynamic_title active">text 6</div>
<div class="dynamic_title inactive">text 7</div>
<div class="dynamic_title inactive">text 8</div>
<div class="dynamic_title inactive">text 9</div>
<div class="dynamic_title inactive">text 10</div>
</div>
I need to change classes from inactive to active in each dynamic_title block in turn. That is, the next one takes active, and the previous one with active in inactive and so on in a circle.
When I have one dynamic_titles block, everything works fine, but 2 interfere with each other, break. I'm trying not to make 2 functions for each block separately, I want to make one universal one that would be applied to each block separately.
Now I have such a code, but it does not work as expected. It runs once and goes no further. If done without .each, it works, but again not as expected and eventually breaks. What is my mistake?
$('.dynamic_titles').each(function () {
var index = 1,
max = $(this).find('.dynamic_title').length;
function setActiveHeadline() {
setTimeout(function () {
$(this).find('.active').removeClass('active').addClass('inactive');
index++;
if (index > max) {
index = 1;
}
$(this).find('.dynamic_title:nth-of-type(' + index + ')').addClass('active').removeClass('inactive');
setActiveHeadline();
}, 3000);
}
setActiveHeadline();
widthTitle = $(this).find('.dynamic_title.active').width();
$(this).css({
'width': widthTitle,
});
function setWidthHeadlines() {
setTimeout(function () {
widthTitle = $(this).find('.dynamic_title.active').width();
$(this).css({
'width': widthTitle,
});
setWidthHeadlines();
}, 3000);
}
setWidthHeadlines();
})
Thank you for your help!
I think you could simplify this into one function that uses setInterval, please see the following snippet:
$(function(){
//use setInterval to continue the changes
setInterval(() => {
//iterate the blocks
$('div.dynamic_titles').each(function() {
//get the children
const $children = $(this).find('div.dynamic_title');
//get the number of children
const numofchildren = $children.length;
//index for switching active in children
let activeindex = 0;
//iterate children to find the active one
$children.each(function(i, el) {
//if active, remove active and add inactive classNames
//store the index
//break the each loop
if($(el).hasClass('active')){
$(el).removeClass('active').addClass('inactive');
activeindex = i + 1;
return false;
}
});
//if index has reached the last child, reset to zero
if(activeindex > numofchildren - 1){
activeindex = 0;
}
//set the next child to active and remove inactive className
$children[activeindex].classList.add('active');
$children[activeindex].classList.remove('inactive');
});
}, 3000);
})
.active {
color:green;
}
.inactive {
color:grey;
}
<div class="dynamic_titles">
<div class="dynamic_title active">text 1</div>
<div class="dynamic_title inactive">text 2</div>
<div class="dynamic_title inactive">text 3</div>
<div class="dynamic_title inactive">text 4</div>
<div class="dynamic_title inactive">text 5</div>
</div>
<div class="dynamic_titles">
<div class="dynamic_title active">text 6</div>
<div class="dynamic_title inactive">text 7</div>
<div class="dynamic_title inactive">text 8</div>
<div class="dynamic_title inactive">text 9</div>
<div class="dynamic_title inactive">text 10</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
I'm trying to show the next image by just adding the style: display(none) but it is not working at all
<script>
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
displayBanner();
</script>
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"></div>
<div class="banner_img" id="banner_img2"></div>
<div class="banner_img" id="banner_img3"></div>
</div>
</div>
</header>
Your element does not exist when you execute the script before the element. Move the script to after the elements or move displayBanner into a load event
I assume you want to rotate the images
var count = 0, max;
function displayBanner() {
document.getElementById("banner_img"+count).style.display = "none";
count++
if (count === max ) count = 0
document.getElementById("banner_img"+count).style.display = "block";
}
window.addEventListener("load", function() {
max = document.querySelectorAll(".banner_img").length;
document.getElementById("banner_img0").style.display = "block";
setInterval(displayBanner, 3000);
})
.banner_img { display:none; text-align:center }
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img0"><img src="http://lorempixel.com/output/animals-q-c-640-480-1.jpg" /><br/>Image 1</div>
<div class="banner_img" id="banner_img1"><img src="http://lorempixel.com/output/animals-q-c-640-480-2.jpg" /><br/>Image 2</div>
<div class="banner_img" id="banner_img2"><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /><br/>Image 3</div>
</div>
</div>
</header>
your div didn't have any source add a source using <img src=""></img> for the div try below code for that
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg" ></div>
<div class="banner_img" id="banner_img2"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
<div class="banner_img" id="banner_img3"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
</div>
</div>
</header>
window.onload=displayBanner();
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
working demo:https://jsfiddle.net/athulmathew/yh2esp1c/21/
I have a 6 divs (although the code should work for any number of divs). I want to show 4 divs at a time when the button #more-projects is clicked. Ideally, the the first 4 divs would be shown when the #more-projects is clicked for the first time, when it's clicked again all divs are hidden and then the next divs are shown in this case it would be 5 and 6 would be along with 1 and 2. Whenever the #more-projects is clicked the next four divs would be shown. Below is my approach but I don't know how to progress
$('#more-projects').on('click', function() {
var projects = [];
var shown = [];
var start = [];
$('.thumbnail-cnt').each(function(i) {
projects.push($(this).data('num'));
})
var shown = projects.slice(0,4);
$('[data-num="' + shown.join('"], [data-id="') + '"]').addClass('visible');
});
.thumbnail-cnt {
display: none;
}
.visible {
display: block;
}
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<div class="thumbnail-cnt" data-num="1">
</div>
<div class="thumbnail-cnt" data-num="2">
</div>
<div class="thumbnail-cnt" data-num="3">
</div>
<div class="thumbnail-cnt" data-num="4">
</div>
<div class="thumbnail-cnt" data-num="5">
</div>
<div class="thumbnail-cnt" data-num="6">
</div>
<button id="more-projects">
</button>
From here I was going slice the projects to be shown, add class .visible and make a var of the index in the array that should be the starting point of the next 4 projects. But I don't know how to implement this of to cycle back to the start of the array. Any help would be appreciated.
Please check this code
HTML
<div id="container">
<div class="thumbnail-cnt" data-num="1">1
</div>
<div class="thumbnail-cnt" data-num="2">2
</div>
<div class="thumbnail-cnt" data-num="3">3
</div>
<div class="thumbnail-cnt" data-num="4">4
</div>
<div class="thumbnail-cnt" data-num="5">5
</div>
<div class="thumbnail-cnt" data-num="6">6
</div>
</div>
<button id="more-projects" > Next
</button>
JS
$(document).ready(function(){
var divQueue = [];
$("#container div").each(function(){
divQueue.push($(this));
});
function showDivs(){
$("#container").html('');
$(".thumbnail-cnt").css("display","none");
var i=0;
while(i<4){
var temp = divQueue[0];
$("#container").append(temp[0]);
divQueue.shift();
divQueue.push(temp);
i++;
}
}
showDivs();
$("#more-projects").click(function(){
showDivs();
});
});
CSS
.thumbnail-cnt {
height : 30px;
width : 25px;
}
#more-projects {
width : 100px;
height : 50px;
}
Please refer Fiddle
I would try to assign an id for each div, something like:
<div class="thumbnail-cnt" id="div1" data-num="1">
</div>
<div class="thumbnail-cnt" id="div2" data-num="2">
</div>
<div class="thumbnail-cnt" id="div3" data-num="3">
</div>
<div class="thumbnail-cnt" id="div4" data-num="4">
</div>
<div class="thumbnail-cnt" id="div5" data-num="5">
</div>
If you are using Jquery you can use the methods hide() and show()
If you want to show X divs:
for(var i = 1; i < X; i ++){
$('#div'+i).show();
}
for(var i = X; i < numDivs; i ++){
$('#div'+i).hide();
}
Using arrays have managed to rotate the divs. Check if this is what you are looking for:
var divs = [];
$('.thumbnail-cnt').each(function() {
divs['' + $(this).index() + ''] = $(this).data('num');
divs.push($(this).text());
});
divs.splice(0, 1);
$('#more-projects').on('click', function() {
$('.thumbnail-cnt').hide();
var count = 0;
$(divs).each(function(k, v) {
if (count == 4)
return false;
$('.thumbnail-cnt[data-num="' + v + '"]').show();
divs.push(divs.shift());
count++;
});
});
.thumbnail-cnt {
display: none;
}
.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail-cnt" data-num=1>Test 1</div>
<div class="thumbnail-cnt" data-num=2>Test 2</div>
<div class="thumbnail-cnt" data-num=3>Test 3</div>
<div class="thumbnail-cnt" data-num=4>Test 4</div>
<div class="thumbnail-cnt" data-num=5>Test 5</div>
<div class="thumbnail-cnt" data-num=6>Test 6</div>
<div class="thumbnail-cnt" data-num=7>Test 7</div>
<div class="thumbnail-cnt" data-num=8>Test 8</div>
<div class="thumbnail-cnt" data-num=9>Test 9</div>
<button id="more-projects">More</button>
I have a question about Javascript.
You can find my HTML markup below
<div class="slides">
<div class="slide active" id="one"></div>
<div class="slide" id="two"></div>
<div class="slide" id="third"></div>
<div class="slide" id="fourth"></div>
</div>
<button onclick="slide-down()">
Next slide
</button>
<button onclick="slide-up()">
Previous slide
</button>
What can i do if the user click on the button slide-down to remove with pure javascript the class 'active' en set this to the next slide element?
You can use a single function, set class at <button> elements to "prev" and "next", pass clicked button .className to function; .getElementsByClassName(), .nextElementSibling, .previousElementSibling
.active {
color: green;
}
<div class="slides">
<div class="slide active" id="one">one</div>
<div class="slide" id="two">two</div>
<div class="slide" id="third">third</div>
<div class="slide" id="fourth">fourth</div>
</div>
<button class="next" onclick="slide(this.className)">
Next slide
</button>
<button class="prev" onclick="slide(this.className)">
Previous slide
</button>
<script>
var active = document.getElementsByClassName("active");
function slide(prevNext) {
if (prevNext === "next") {
if (active[0].nextElementSibling) {
active[0].nextElementSibling.className = "active";
active[0].className = "";
}
} else {
if (active[0].previousElementSibling) {
active[0].previousElementSibling.className = "active";
active[active.length - 1].className = "";
}
}
}
</script>
Something like the below will work. Makes use of many javascript DOM properties and methods. You will need to change the names of your functions slightly as a hyphen is not valid in a name of a function. Ive replaced with underscores.
function slide_down(){
var elems = document.querySelectorAll(".slide");
var curr = document.querySelector(".active");
curr.classList.remove("active");
if(curr.nextElementSibling)
curr.nextElementSibling.classList.add("active");
else
elems[0].classList.add("active");
}
function slide_up(){
var elems = document.querySelectorAll(".slide");
var curr = document.querySelector(".active");
curr.classList.remove("active");
if(curr.previousElementSibling)
curr.previousElementSibling.classList.add("active");
else
elems[elems.length-1].classList.add("active");
}
.active{background-color:red}
<div class="slides">
<div class="slide active" id="one">1</div>
<div class="slide" id="two">2</div>
<div class="slide" id="third">3</div>
<div class="slide" id="fourth">4</div>
</div>
<button onclick="slide_down()">
Next slide
</button>
<button onclick="slide_up()">
Previous slide
</button>
Here is an example I wrote. Jasmiec answered before I finished, and I honestly like some of the different methods used in that example. As already mentioned, you will need to change the names of your functions because a hyphen makes the name invalid.
<div class="slides">
<div class="slide active" id="one"></div>
<div class="slide" id="two"></div>
<div class="slide" id="three"></div>
<div class="slide" id="four"></div>
</div>
<button onclick="slideDown()">
Next slide
</button>
<button onclick="slideUp()">
Previous slide
</button>
<script>
var slides = ["one", "two", "three", "four"]
function slideDown() {
var element = document.getElementsByClassName('active')[0];
var index = slides.indexOf(element.id) + 1;
if (index < slides.length) {
element.className = "slide";
document.getElementById(slides[index]).className = "slide active";
}
}
function slideUp() {
var element = document.getElementsByClassName('active')[0];
var index = slides.indexOf(element.id) - 1;
if (index >= 0) {
element.className = "slide";
document.getElementById(slides[index]).className = "slide active";
}
}
</script>
I have a list of hidden divs and would like to be able to show one div at a time, when a button is pressed, .. I am having a hard time writing the proper loop for this.
product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option).each(function(){
$(this).css("display", "block")
});
});
}
currently it displays them all onclick, i deleted all my other loop attempts, bc they were egregiously wrong or were not doing much
Try
product_option.first().show(); //show only the first one
product_option = product_option.slice(1); //remove the first one
Demo:
$(function() {
var options = $('.product_option').hide();
$('.add').click(function() {
if(options.length) {
options.first().show();
options = options.slice(1);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_option">Option 1</div>
<div class="product_option">Option 2</div>
<div class="product_option">Option 3</div>
<div class="product_option">Option 4</div>
<div class="product_option">Option 5</div>
<div class="product_option">Option 6</div>
<div class="add">Add product option</div>
product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option + ':hidden').eq(0).show();
});
}
try this : demo
$('.product_product_options_option_name').hide();
var count = 0;
$('.add_product_option').on('click',function(){
$('.product_product_options_option_name:eq('+count+')').show();
count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="add">
<input type="button" class="add_product_option" value="click" />
</div>
<div class="product_product_options_option_name">
<label>1div</label>
</div>
<div class="product_product_options_option_name">
<label>2div</label>
</div>
<div class="product_product_options_option_name">
<label>3div</label>
</div>
<div class="product_product_options_option_name">
<label>4div</label>
</div>