Loop For use in setinterval carousel

Loop For use in setinterval carousel - javascript

I have a little problem with my setinterval, that is to say that I would like my index to start at -1 as it is when i go to 1 and the index goes to 0 to add d-none but that does not does not give the desired result so if my i === 1 else index ===0 and y cant y have try multiple function but its not good
code html:
<section class="mb-5">
<div class="carou mb-5 pb-5">
<div class="divCarou">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-luxry-sofa.jpg" alt="">
</div>
<div class="divPJS1 pt-3">
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-gloves.jpg" alt="">
</div>
<div class="d-flex justify-content-center gap-4 mt-3">
<div class="bRoun1">
<p>SALE!</p>
</div>
<div>
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-cups.jpg" alt="">
</div>
<div class="divPJS1 pt-3">
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bag.jpg" alt="">
</div>
<div class="d-flex justify-content-center gap-4 mt-3">
<div class="bRoun1">
<p>SALE!</p>
</div>
<div>
<p>Luxury Sofa</p>
<p class="pRjs">$600.00</p>
</div>
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bed.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-modern-sofa.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-shoes.jpg" alt="">
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-tshitr.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-bag-2-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-jacket-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
</div>
<div class="divCarou d-none">
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products/product-tshitr-white-700x500.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-bag.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-cups.jpg" alt="">
</div>
</div>
<div>
<div class="imgBright">
<img class="imgJS2" src="./public/img/products_mini/product-plates.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="d-flex gap-3 justify-content-center">
<i class="fa-regular fa-circle btnCarou active"></i>
<i class="fa-regular fa-circle btnCarou"></i>
<i class="fa-regular fa-circle btnCarou"></i>
<i class="fa-regular fa-circle btnCarou"></i>
</div>
</section>
code js:
let i2 = document.querySelectorAll(".btnCarou");
let i3 = document.querySelectorAll(".btnCarou");
let divCarou = document.querySelectorAll(".divCarou");
let divCarou2 = document.querySelectorAll(".divCarou");
function Carou2() {
setInterval( () => {
for (let i = 1, index = 0 ; i < i2.length, index = i3.length; i++ , index++) {
if (![... i2[i].classList].includes("active")) {
i2[i].classList.add("active");
divCarou[i].classList.remove("d-none");
if ([... i3[index].classList].includes("active")) {
i3[index].classList.remove("active");
divCarou2[index].classList.add("d-none");
}
}
}
}, 2000)
}
Carou2()

Related

Why is dataset undefined sometimes?

Why is const filter undefined sometimes when i press it..I have used data-filter on buttons to sort store items..but sometimes when i press a button with dataset filter i get undefined
const buttons = document.querySelectorAll('.filter-btn');
const storeItems = document.querySelectorAll('.store-item');
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault()
const filter = e.target.dataset.filter
console.log(filter)
storeItems.forEach((item) => {
if (filter === 'all') {
item.style.display = 'block'
} else {
if (item.classList.contains(filter)) {
item.style.display = 'block'
} else {
item.style.display = 'none'
}
}
})
})
})
.img-wrap img {
width : 300px;
}
<div class="container-fluid store-wrap">
<div class="store-heading">
<h1>OUR <span>STORE</span></h1>
<div class="button-wrap">
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
<button data-filter="cakes" class="filter-btn"><p>CAKES</p></button>
<button data-filter="cupcakes" class="filter-btn"><p>CUPCAKES</p></button>
<button data-filter="sweets" class="filter-btn"><p>SWEETS</p></button>
<button data-filter="doughnuts" class="filter-btn"><p>DOUGHNUTS</p></button>
</div>
<div class="search-wrap">
<div class="icon-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" placeholder="Item...">
</div>
</div>
<div class="row store">
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1089&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359756098-8bc52195bbf4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
<div class="row store">
<div class="col-lg store-item doughnuts" data-item="doughnuts">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1533910534207-90f31029a78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Doughnuts</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1602351447937-745cb720612f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1615837136007-701de6015cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcakes</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item sweets" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359746315-119f1360d663?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
</div>

e.target will refer to the innermost item clicked. If you add an event listener to the container, and the container has a child element, e.target may refer to the container (if you clicked outside the child), or it may refer to the child (if you clicked inside the child). That's what's happening here. If you click directly on one of the texts inside the button, you'll be clicking on a <p> tag, not the button - and that'll be the target.
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
^^^^^^^^^^
Refer to the button you already have in scope instead of to e.target.
const buttons = document.querySelectorAll('.filter-btn');
const storeItems = document.querySelectorAll('.store-item');
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault()
const { filter } = button.dataset;
console.log(filter)
storeItems.forEach((item) => {
if (filter === 'all') {
item.style.display = 'block'
} else {
if (item.classList.contains(filter)) {
item.style.display = 'block'
} else {
item.style.display = 'none'
}
}
})
})
})
.img-wrap img {
width : 300px;
}
<div class="container-fluid store-wrap">
<div class="store-heading">
<h1>OUR <span>STORE</span></h1>
<div class="button-wrap">
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
<button data-filter="cakes" class="filter-btn"><p>CAKES</p></button>
<button data-filter="cupcakes" class="filter-btn"><p>CUPCAKES</p></button>
<button data-filter="sweets" class="filter-btn"><p>SWEETS</p></button>
<button data-filter="doughnuts" class="filter-btn"><p>DOUGHNUTS</p></button>
</div>
<div class="search-wrap">
<div class="icon-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" placeholder="Item...">
</div>
</div>
<div class="row store">
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1089&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359756098-8bc52195bbf4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
<div class="row store">
<div class="col-lg store-item doughnuts" data-item="doughnuts">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1533910534207-90f31029a78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Doughnuts</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1602351447937-745cb720612f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1615837136007-701de6015cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcakes</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item sweets" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359746315-119f1360d663?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
</div>
If you had to gain another reference to the element you attached the event listener to and didn't have button already in scope, you could use e.currentTarget instead of e.target - .target will refer to the innermost element (the one that the event was dispatched to), but e.currentTarget will refer to the element the listener is attached to.

The problem is occoured for event deligation. You have a p tag in button. So, for event deligatoin, sometimes click goes to the p tag instead of button. You can fix the issue in this way-
const filter = e.target.closest("button").dataset.filter

How to hide product item if the price is 0

Some of my products have 0 price. Until I fix this issue I want to hide those products from
collection pages.
So,
How can I hide the .productItem or .ItemOrj if the .productPrice span is == ₺0,00 , else show
Look code below:
<div id="ProductPageProductList" class="ProductList sort_4">
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.950,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0,00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have also tried but not worked:
var amount = parseFloat($('.productPrice span').html().replace(",", "."));
if(amount === 0){
$('.productItem').css("display", "none");
}else{
$('.productItem').css("display", "block");
}

I stripped out the additional HTML for my answer since it doesn't affect my answer.
But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.
$(document).ready(function(){
$(".productItem").each(function(){
let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,""));
if(price == 0){
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0
</span>
</div>
</div>
</div>

How to iterate through divs, grab href and wrap a different element using jQuery?

I'm really new to jQuery and only managed to do basic CSS edits so far. I don't have access to the source code, but I need to iterate through each div with class '.card', grab the href of the hyperlink and apply the link to the each respective image so the user can click on the image to in addition to the text.
I tried the following but it had unintended consequences:
Successfully added hyperlink to each image, but was applied multiple times each
Value of hyperlink was 'undefined'
$(function() {
$(".card-img").each(function() { // For each card
var a = $(this).next('a'); // Find its associated anchor
$(".card-img").wrap(''); // And wrap the card image
});
});
Can anyone show me how to do this?
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>

Loop over each .card div using .each() and then use $(this) to refer to the card div. Within the loop use .find() to both grab the href as well as .wrap() to wrap the image with the href:
$('.card').each(function() {
var href = $(this).find('a').attr('href');
$(this).find('img').wrap(``)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>

Add created element after closest third div within the row

I have six blocks, each block has a click function to trigger the contentBlock() snippet.
I'm trying to get the contentBlock() to create the element and display the created div after the closest third item (After the third within the row), currently, the below creates the div and displays after every third item on both rows.
How do I get the created element to sit after the closest third item? E.G The first three triggers would display content under the first row and the next three under the next row.
Any and all suggestions would be appreciated.
function contentBlock() {
const items = document.querySelectorAll('.js-item');
items.forEach(function (item, index) {
if((index + 1) % 3 === 0) {
/* Create Element */
const elem = document.createElement('div');
elem.classList.add('js-content-block', 'col-12');
elem.innerText = 'Content Block';
item.parentNode.insertBefore(elem, item.nextSibling);
}
})
}
<div class="row">
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="0" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="1" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="2" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="3" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="4" aria-label="#">+</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 js-item">
<div class="card">
<div class="card__thumbnail">
<img src="#" alt="#">
</div>
<div class="card__title">
<h3>Name</h3>
</div>
<div class="card__body">
<p>role</p>
</div>
<div class="card__actions">
<div>
<ul>
<li>
Number
</li>
<li>
Email
</li>
</ul>
</div>
<div>
<button class="js-toggle" data-count="5" aria-label="#">+</button>
</div>
</div>
</div>
</div>
</div>

ContentFlow - div max-width not working

I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php

Develop Reference

JavaScript is the programming language of the Web.

Loop For use in setinterval carousel - javascript

Related

Why is dataset undefined sometimes?

How to hide product item if the price is 0

How to iterate through divs, grab href and wrap a different element using jQuery?

Add created element after closest third div within the row

ContentFlow - div max-width not working

Categories

Resources