Slider with the hover effect in home page without using any inbuilt carousal or slider library making with the help of events and ,html and CSS ,the image and hover image should be configurable
js code:
define(
'JJ.HomePagePersonalization.HomePagePersonalization'
, [
'Home.View','jj_homepagepersonalization_homepagepersonalization.tpl'
]
, function (
HomeView,jj_homepagepersonalization_homepagepersonalization_tpl
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
_.extend(HomeView.prototype, {
template: jj_homepagepersonalization_homepagepersonalization_tpl,
initialize: _.wrap(HomeView.prototype.initialize, function initialize(fn) {
try {
//extended HomeView initialize for the best seller slider and new arrival slider functionality
let self = this;
fn.apply(this, _.toArray(arguments).slice(1));
self.bestSellerSlide = 1;
self.bestSellerTotalSlide = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.bestseller ? SC.CONFIGURATION.HomePagePersonalization.bestseller.length : 0;
self.bestSellerSliders = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.bestseller ? SC.CONFIGURATION.HomePagePersonalization.bestseller : [];
self.bestSellerSlidersExtra = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.bestseller ? SC.CONFIGURATION.HomePagePersonalization.bestseller.slice(0, 3) : [];
self.windowWidth = window.innerWidth;
if (self.windowWidth > 768) {
self.bestSellerMaxSliders = 4;
}else if (self.windowWidth <= 768 && self.windowWidth > 480) {
self.bestSellerMaxSliders = 3;
} else {
self.bestSellerMaxSliders = 2;
}
self.bestSellerSliderWidth = self.windowWidth * 0.95/ self.bestSellerMaxSliders;
self.bestSellerContainer = self.bestSellerSliderWidth * (self.bestSellerTotalSlide + self.bestSellerMaxSliders -1);
window.addEventListener("resize", function () {
self.windowWidth = window.innerWidth;
if (self.windowWidth > 768) {
self.bestSellerMaxSliders = 4;
}else if (self.windowWidth <= 768 && self.windowWidth > 480) {
self.bestSellerMaxSliders = 3;
} else {
self.bestSellerMaxSliders = 2;
}
self.bestSellerSliderWidth = self.windowWidth * 0.95/ self.bestSellerMaxSliders;
self.bestSellerContainer = self.bestSellerSliderWidth * (self.bestSellerTotalSlide + self.bestSellerMaxSliders -1);
self.render();
document.getElementById('bestseller-previous').style.transform = 'translateY(' + -(document.getElementsByClassName('best-seller-card') ? document.getElementsByClassName('best-seller-card')[0].offsetHeight / 2 + 20 : '') + 'px)';
document.getElementById('bestseller-next').style.transform = 'rotate(180deg) translateY(' + (document.getElementsByClassName('best-seller-card') ? document.getElementsByClassName('best-seller-card')[0].offsetHeight / 2 + 20 : '') + 'px)';
document.getElementById('best-seller-card-container').style.transform = 'translateX(' + -((self.bestSellerSliderWidth + 5) * (self.bestSellerSlide - 1)) + 'px)';
});
this.on('afterViewRender', function () {
_.defer(function () {
document.getElementById('bestseller-previous').style.transform = 'translateY(' + -(document.getElementsByClassName('best-seller-card') ? document.getElementsByClassName('best-seller-card')[0].offsetHeight / 2 + 20 : '') + 'px)';
document.getElementById('bestseller-next').style.transform = 'rotate(180deg) translateY(' + (document.getElementsByClassName('best-seller-card') ? document.getElementsByClassName('best-seller-card') ? document.getElementsByClassName('best-seller-card')[0].offsetHeight / 2 + 20 : '' : '') + 'px)';
})
})
self.newArrivalSlide = 1;
self.newArrivalTotalSlide = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.config ?SC.CONFIGURATION.HomePagePersonalization.config.length : 0;
self.newArrivalSliders = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.config ? SC.CONFIGURATION.HomePagePersonalization.config : [];
self.newArrivalSlidersExtra = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.config ? SC.CONFIGURATION.HomePagePersonalization.config.slice(0, 3) : [];
self.windowWidth = window.innerWidth;
self.shopBlvdWidth = 8 * (0.95 * this.windowWidth / 6);
if (self.windowWidth > 768) {
self.newArrivalMaxSliders = 4;
}else if (self.windowWidth <= 768 && self.windowWidth > 480) {
self.newArrivalMaxSliders = 3;
} else {
self.newArrivalMaxSliders = 2;
}
self.newArrivalSliderWidth = self.windowWidth * 0.95/ self.newArrivalMaxSliders;
self.newArrivalContainer = self.newArrivalSliderWidth * (self.newArrivalTotalSlide + self.newArrivalMaxSliders -1);
window.addEventListener("resize", function () {
self.windowWidth = window.innerWidth;
if (self.windowWidth > 768) {
self.newArrivalMaxSliders = 4;
}else if (self.windowWidth <= 768 && self.windowWidth > 480) {
self.newArrivalMaxSliders = 3;
} else {
self.newArrivalMaxSliders = 2;
}
self.newArrivalSliderWidth = self.windowWidth * 0.95/ self.newArrivalMaxSliders;
self.newArrivalContainer = self.newArrivalSliderWidth * (self.newArrivalTotalSlide + self.newArrivalMaxSliders -1);
self.render();
document.getElementById('new-arrival-previous').style.transform = 'translateY(' + -(document.getElementsByClassName('new-arrival-card') ? document.getElementsByClassName('new-arrival-card')[0].offsetHeight / 2 + 20:'') + 'px)';
document.getElementById('new-arrival-next').style.transform = 'rotate(180deg) translateY(' + (document.getElementsByClassName('new-arrival-card') ? document.getElementsByClassName('new-arrival-card')[0].offsetHeight / 2 + 20:'') + 'px)';
document.getElementById('new-arrival-card-container').style.transform = 'translateX(' + -((self.newArrivalSliderWidth + 5) * (self.newArrivalSlide - 1)) + 'px)';
document.getElementsByClassName('blvd-shop-feed')[0].style.width = ($('.blvd-feed-card')[0].offsetWidth * $('.blvd-feed-card').length) + 'px';
});
this.on('afterViewRender', function () {
_.defer(function () {
document.getElementById('new-arrival-previous').style.transform = 'translateY(' + -(document.getElementsByClassName('new-arrival-card') ? document.getElementsByClassName('new-arrival-card')[0].offsetHeight / 2 + 20:'') + 'px)';
document.getElementById('new-arrival-next').style.transform = 'rotate(180deg) translateY(' + (document.getElementsByClassName('new-arrival-card') ? document.getElementsByClassName('new-arrival-card') ? document.getElementsByClassName('new-arrival-card')[0].offsetHeight / 2 + 20: '' : '') + 'px)';
})
})
} catch (e) {
console.error('Error @ HomeView initialize', e);
}
}),
events: _.extend({}, HomeView.prototype.events, {
'click [data-action="show-Prev-Slide-New-Arrival"]': 'showPrevNewArrival',
'click [data-action="show-next-Slide-New-Arrival"]': 'showNextNewArrival',
'click [data-action="show-Prev-Slide"]': 'showPrevBestSeller',
'click [data-action="show-next-Slide"]': 'showNextBestSeller',
'mouseenter [data-action="changeCurrentImage"]': 'toggleImage',
'mouseleave [data-action="changeCurrentImage"]': 'toggleImage',
'click #next-blvd-scroller': 'showNextBlvdFeed',
'click #prevs-blvd-scroller': 'showPrevBlvdFeed',
'click [data-action="show-slider-popup"]': 'showSliderPopup',
'click .close-btn-container': 'hideSliderPopup',
}),
//showPrevNewArrival function is used for New arrival next slider
showPrevNewArrival: function (e) {
try {
if (this.newArrivalSlide === 1) {
document.getElementById('new-arrival-card-container').style.transform = 'translateX(' + -((this.newArrivalSliderWidth + 5) * (this.newArrivalTotalSlide - 1)) + 'px)';
this.newArrivalSlide = this.newArrivalTotalSlide;
} else {
this.newArrivalSlide--;
document.getElementById('new-arrival-card-container').style.transform = 'translateX(' + -((this.newArrivalSliderWidth + 5) * (this.newArrivalSlide - 1)) + 'px)';
}
} catch (e) {
console.error('Error @ HomeView Prev bestSeller', e);
}
},
//showNextNewArrival function is used for New arrival next slider
showNextNewArrival: function (e) {
try {
if (this.newArrivalSlide === this.newArrivalTotalSlide) {
document.getElementById('new-arrival-card-container').style.transform = 'translateX(0px)';
this.newArrivalSlide = 1;
} else {
document.getElementById('new-arrival-card-container').style.transform = 'translateX(' + -((this.newArrivalSliderWidth + 5) * this.newArrivalSlide) + 'px)';
console.log("TEST 123 @ file: JJ.HomePagePersonalization.HomePagePersonalization.js @ var: (this.newArrivalSliderWidth * this.newArrivalSlide)", (this.newArrivalSliderWidth * this.newArrivalSlide))
this.newArrivalSlide++;
}
} catch (e) {
console.error('Error @ HomeView showBest Seller', e);
}
},
//showPrevBestSeller function is used for Best seller next slider
showPrevBestSeller: function (e) {
try {
if (this.bestSellerSlide === 1) {
document.getElementById('best-seller-card-container').style.transform = 'translateX(' + -((this.bestSellerSliderWidth + 5) * (this.bestSellerTotalSlide - 1)) + 'px)';
this.bestSellerSlide = this.bestSellerTotalSlide;
} else {
this.bestSellerSlide--;
document.getElementById('best-seller-card-container').style.transform = 'translateX(' + -((this.bestSellerSliderWidth + 5) * (this.bestSellerSlide - 1)) + 'px)';
}
} catch (e) {
console.error('Error @ HomeView Prev bestSeller', e);
}
},
//showNextBestSeller function is used for Best seller previous slider
showNextBestSeller: function (e) {
try {
if (this.bestSellerSlide === this.bestSellerTotalSlide) {
document.getElementById('best-seller-card-container').style.transform = 'translateX(0px)';
this.bestSellerSlide = 1;
} else {
document.getElementById('best-seller-card-container').style.transform = 'translateX(' + -((this.bestSellerSliderWidth + 5) * this.bestSellerSlide) + 'px)';
console.log("TEST 123 @ file: JJ.HomePagePersonalization.HomePagePersonalization.js @ var: (this.bestSellerSliderWidth * this.bestSellerSlide)", (this.bestSellerSliderWidth * this.bestSellerSlide))
this.bestSellerSlide++;
}
} catch (e) {
console.error('Error @ HomeView showBest Seller', e);
}
},
//toggleImage function is used for Best seller image toggle.
toggleImage: function (e) {
try {
$(e.currentTarget).toggleClass("show-second");
} catch (e) {
console.error('Error @ HomeView toggleImage', e);
}
},
//function for BLVD slider next button
showNextBlvdFeed: function (e) {
},
//function for BLVD slider Previous button
showPrevBlvdFeed: function (e) {
},
//function for dispalying the Slider Popup under the BLVD section
showSliderPopup: function (e) {
let currentPopUp = e.currentTarget.childNodes[0].childNodes[0].alt;
let popUpData = _.filter(SC.CONFIGURATION.homepage.shopblvd.Links, function (linkData) {
return linkData.itemnames === currentPopUp;
});
$('.left-hand-side-producr-img').attr('src', popUpData[0].popupimage);
$('.background-blur').css('background-image', 'url(' + popUpData[0].popupimage + ')');
$('.left-hand-side-producr-img').attr('alt', popUpData[0].itemnames);
$('.right-hand-side-producr-img').attr('src', popUpData[0].itemimage);
$('.right-hand-side-producr-img').attr('alt', popUpData[0].itemnames);
$('.product-by-link').attr('href', popUpData[0].buybutton);
$('.product-name-container').text( popUpData[0].itemnames);
$('#popup-scroller-inmodel-container').addClass('active');
let imageContainerHeight = $('#popup-left-hand-side')[0].offsetHeight;
$('.lower-container').css('height', imageContainerHeight + 'px');
},
//function for hiding the Slider Popup under the BLVD section
hideSliderPopup: function (e) {
$(".left-hand-side-producr-img").removeAttr("src");
$(".left-hand-side-producr-img").removeAttr("alt");
$(".right-hand-side-producr-img").removeAttr("src");
$(".right-hand-side-producr-img").removeAttr("alt");
$('.background-blur').css('background', '');
$(".product-by-link").removeAttr("href");
$(".product-name-container").text("");
$("#popup-scroller-inmodel-container").removeClass("active");
},
getContext: _.wrap(HomeView.prototype.getContext, function (fn) {
let original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
try {
var goodThingsImage=SC.CONFIGURATION.homepage.goodThings.Links[0];
original_Ret.goodThingsImage = goodThingsImage;
var youNewGoToImage = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].younewgotoImage;
original_Ret.youNewGoToImage = youNewGoToImage;
var youNewGoToHeader = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].younewgotoheader;
original_Ret.youNewGoToHeader = youNewGoToHeader;
var youNewGoToLink = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].younewgotolink;
original_Ret.youNewGoToLink = youNewGoToLink;
var youNewGoToText = SC.CONFIGURATION.homepage.yourNewGoTo.Links[0].younewgototext;
original_Ret.youNewGoToText = youNewGoToText;
original_Ret.bestSellerContainer = this.bestSellerContainer + 'px';
original_Ret.bestSellerSliderWidth = this.bestSellerSliderWidth + 'px';
original_Ret.isNotDesktop = window.innerWidth > 768 ? false : true;
original_Ret.bestSellerURL = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.bestsellerURL ? SC.CONFIGURATION.HomePagePersonalization.bestsellerURL : '';
_.each(this.bestSellerSliders, (slide) => {
slide.bestSellerSliderWidth = original_Ret.bestSellerSliderWidth;
})
_.each(this.bestSellerSlidersExtra, (slide) => {
slide.bestSellerSliderWidth = original_Ret.bestSellerSliderWidth;
})
original_Ret.bestSellerSliders = this.bestSellerSliders;
original_Ret.bestSellerSlidersExtra = this.bestSellerSlidersExtra;
original_Ret.newArrivalContainer = this.newArrivalContainer + 'px';
original_Ret.newArrivalSliderWidth = this.newArrivalSliderWidth + 'px';
original_Ret.isNotDesktop = window.innerWidth > 768 ? false : true;
original_Ret.newArrivalURL = SC.CONFIGURATION.HomePagePersonalization && SC.CONFIGURATION.HomePagePersonalization.newarrivalURL ? SC.CONFIGURATION.HomePagePersonalization.newarrivalURL : '';
_.each(this.newArrivalSliders, (slide) => {
slide.newArrivalSliderWidth = original_Ret.newArrivalSliderWidth;
})
_.each(this.newArrivalSlidersExtra, (slide) => {
slide.newArrivalSliderWidth = original_Ret.newArrivalSliderWidth;
})
original_Ret.newArrivalSliders = this.newArrivalSliders;
original_Ret.newArrivalSlidersExtra = this.newArrivalSlidersExtra;
original_Ret.blvdSliderFeed = SC.CONFIGURATION.homepage.shopblvd.Links;
original_Ret.shopBlvdWidth = this.shopBlvdWidth;
} catch (e) {
console.error('Error @ HomeView getContext', e);
}
return original_Ret;
})
})
}
};
});
css code:
.new-arrival-cards {
width: 96%;
position: relative;
overflow: hidden;
margin: auto;
margin-top: 25px;
}
#new-arrival-card-container {
height: 100%;
list-style: none;
left: 0;
margin: 0;
padding: 0;
position: relative;
transition: all 0.75s ease;
gap: 5px;
display: flex;
}
.new-arrival-image-container .new-arrival-card-hover-image {
display: none;
}
.new-arrival-image-container.show-second .new-arrival-card-hover-image {
display: block;
}
.new-arrival-image-container.show-second .new-arrival-card-image {
display: none;
}
.new-arrival-header-container {
display: flex;
justify-content: space-between;
align-items: baseline;
width: 96%;
margin: auto;
}
#new-arrival-nav-icons {
display: flex;
width: 100%;
left: 0;
margin: auto;
justify-content: space-between;
position: relative;
}
.new-arrival-header-text {
color: #050505;
font-family: "Bossa-black";
font-size: 2.667rem;
font-weight: 700;
text-decoration: none;
line-height: 1.2;
padding: 0;
margin: 0;
margin-left: 10px;
text-transform: none;
}
#new-arrival-nav-icons div img {
z-index: 5;
position: relative;
cursor: pointer;
}
#new-arrival-prev-img {
margin: auto 0;
}
#new-arrival-previous {
position: relative;
}
#new-arrival-next {
z-index: 5;
margin: auto 0;
position: relative;
transform: rotate(180deg) translateY(113px);
}
.new-arrival-text-container {
text-align: center;
font-family: "Gilroy-Bold";
font-size: 20px;
@media (min-width:$screen-xs){
font-size: 17px;
}
}
#new-arrival-card-container,
.new-arrival-card {
transition: width linear 0.1s;
}
.new-arrival-image-container img {
width: 90%;
margin: auto;
display: flex;
object-fit: contain;
max-height: fit-content;
position: relative;
aspect-ratio: 1;
@media (max-width:$screen-md) {
width: 21vw;
}
}html:
<section class="new-arrival-prodect">
<div class="new-arrival-prodect-feed">
<div class="new-arrival-header-container"><a href="{{newArrivalURL}}"><h1 class="new-arrival-header-text">NEW ARRIVALS</h1></a></div>
<div class="new-arrival-cards">
<div id="new-arrival-card-container" style="width: {{newArrivalContainer}};">
{{#each newArrivalSliders}}
<div class="new-arrival-card" style="width: {{newArrivalSliderWidth}}; min-width: {{newArrivalSliderWidth}}; max-width: {{newArrivalSliderWidth}};">
<a href="{{url}}">
<div class="new-arrival-image-container" data-action="changeCurrentImage">
<img src="{{image}}" alt="{{Itemname}}" class="new-arrival-card-image">
<img src="{{hoverimage}}" alt="{{Itemname}}" class="new-arrival-card-hover-image">
</div>
</a>
<div class="new-arrival-text-container">{{Itemname}}</div>
</div>
{{/each}}
{{#each newArrivalSlidersExtra}}
<div class="new-arrival-card" style="width: {{newArrivalSliderWidth}}; min-width: {{newArrivalSliderWidth}}; max-width: {{newArrivalSliderWidth}};">
<a href="{{url}}">
<div class="new-arrival-image-container" data-action="changeCurrentImage">
<img src="{{image}}" alt="{{Itemname}}" class="new-arrival-card-image">
<img src="{{hoverimage}}" alt="{{Itemname}}" class="new-arrival-card-hover-image">
</div>
</a>
<div class="new-arrival-text-container">{{Itemname}}</div>
</div>
{{/each}}
</div>
</div>
<div id="new-arrival-nav-icons">
<div id="new-arrival-previous">
<img src="/iloveblvdimages/Best-slider-arrow.png" alt="" data-action="show-Prev-Slide-New-Arrival" id="new-arrival-prev-img">
</div>
<div id="new-arrival-next">
<img src="/iloveblvdimages/Best-slider-arrow.png" alt="" data-action="show-next-Slide-New-Arrival" id="new-arrival-next-img">
</div>
</div>
</div>
</section>configuration code:
{
"type": "object",
"group": {
"id": "homepage",
"title": "Homepage",
"description": "Homepage setup"
},
"subtab": {
"id": "newarrival",
"title": "New Arrival",
"description": "New Seller section",
"group": "homepage"
},
"properties": {
"HomePagePersonalization.newarrivalURL": {
"group": "homepage",
"subtab": "newarrival",
"type": "string",
"title": "New Arrival URL",
"description": "New Arrival URL section"
},
"HomePagePersonalization.config": {
"group": "homepage",
"subtab": "newarrival",
"type": "array",
"title": "New Arrival",
"description": "new arrival section",
"items": {
"type": "object",
"properties": {
"Itemname": {
"type": "string",
"title": "Item Name",
"description": ""
},
"image": {
"type": "string",
"title": "Image",
"description": ""
},
"hoverimage": {
"type": "string",
"title": "Hover Image",
"description": ""
},
"link": {
"type": "string",
"title": "Link",
"description": ""
}
}
}
}
}
}