I created a slider that has a data-banner
attribute to send its data to Google Analytics.
I want the data sent to google analytics is the data from the current slide. I've made the script as below, but the Banner 1 data doesn't appear in the console when it's in the initial state. What I want is the first data banner is appear too. What is currently happening is when the slider changes, banner data appears (the initial not appears).
Can anyone help me?
$(document).ready(function(){
$('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () {
let currentActiveSlide = $('.carousel-item.active');
if(currentActiveSlide){
let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner')
let arrayPromotions = [];
arrayPromotions.push({
"id": dataBanner.id,
"name": dataBanner.name
})
//gtag('event', 'view_promotion', {
// "promotions" : arrayPromotions
//});
console.log(arrayPromotions)
console.log(dataBanner)
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="carouselExampleSlidesOnly" data-ride="carousel">
<div >
<div >
<div data-banner='{"id": "1", "name": "Banner 1"}'>
Banner 1
</div>
</div>
<div >
<div data-banner='{"id": "2", "name": "Banner 2"}'>
Banner 2
</div>
</div>
<div >
<div data-banner='{"id": "3", "name": "Banner 3"}'>
Banner 3
</div>
</div>
</div>
</div>
CodePudding user response:
Here may this piece of code solve your issue.
var arrayPromotions = [];
var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel- item.active .main-banner-item").data("banner");
arrayPromotions.push({
"id": firstSlide.id,
"name": firstSlide.name
});
Please check if it's helpful to you or not.
$(document).ready(function(){
var arrayPromotions = [];
var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel-item.active .main-banner-item").data("banner");
arrayPromotions.push({
"id": firstSlide.id,
"name": firstSlide.name
});
console.log(arrayPromotions);
console.log(firstSlide);
//gtag('event', 'view_promotion', {
// "promotions" : arrayPromotions
//});
$('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () {
let currentActiveSlide = $('.carousel-item.active');
if(currentActiveSlide){
let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner')
let arrayPromotions = [];
arrayPromotions.push({
"id": dataBanner.id,
"name": dataBanner.name
})
//gtag('event', 'view_promotion', {
// "promotions" : arrayPromotions
//});
console.log(arrayPromotions)
console.log(dataBanner)
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="carouselExampleSlidesOnly" data-ride="carousel">
<div >
<div >
<div data-banner='{"id": "1", "name": "Banner 1"}'>
Banner 1
</div>
</div>
<div >
<div data-banner='{"id": "2", "name": "Banner 2"}'>
Banner 2
</div>
</div>
<div >
<div data-banner='{"id": "3", "name": "Banner 3"}'>
Banner 3
</div>
</div>
</div>
</div>