Staff replied EasyStore

Slider imagers

Asked by Brad 2 years ago Last activity 2 years ago

I hope you can hope. I have a website I have been working on with products in sliders. Alot of image don’t here is a screenshot of the general setting

and whats in the style Custom CSS

addonWrapper #addonId .sp-slider {

overflow: visible;

}

addonWrapper #addonId .sp-item .sp-background {

border-radius: 4px;

}

addonWrapper #addonId .sp-slider .sp-dots ul {

margin: 0 -6px;
}

addonWrapper #addonId .sp-slider .sp-dots ul li:after {

content: "";
position: absolute;
width:101%;
height: 101%;
top: -.5%;
left: -.5%;
border-radius: 4px;
border: 2px solid transparent;
background-color: #ffffff;
opacity: .4;
}

addonWrapper #addonId .sp-slider .sp-dots ul li.active:after {

border-color: #FFCC5F;
background-color: transparent;
opacity: 1;
}
@media (max-width:1024px) {

addonWrapper #addonId .sp-slider .sp-dots ul li {

width: 31%;
height: 125px;

}
}
@media (max-width:991px) {

addonWrapper #addonId .sp-slider .sp-dots ul li {

width: 30%;
height: 100px;

}
}
@media (max-width:375px) {

addonWrapper #addonId .sp-slider .sp-dots ul li {

width: 29%;

The question is there a commend to shrink image to fit and zoom on mouse scroll? The site is dynamiclighting.com.au

6 replies

Atick Eashrak Shuvo Staff

2 years ago

Hello Brad,

Could you please provide some screenshots for better understanding of the issue?

Brad Asked this

2 years ago

What screen shots would you like?

Atick Eashrak Shuvo Staff

2 years ago

Could you please provide screenshots of the following:

The slider area where the images are not displaying correctly.
The slider settings in the backend.
This will help me better understand the issue and provide more accurate assistance.

Brad Asked this

2 years ago

I know I could resize the images but th is a lot work. I hope this helps
https://dynamiclighting.com.au/component/sppagebuilder/page/23

Atick Eashrak Shuvo Staff

2 years ago

Hello Brad,

https://prnt.sc/c4VQIdF3dC4i To fit the 1st image, use this css

.sppb-addon-sp-slider .sp-background {
    background-size: contain !important;
    background-repeat: no-repeat;
}

To fit the 2nd image, use this css

.dot-controller-with_image.sp-slider .sp-dots ul li {
    background-size: contain !important;
    background-repeat: no-repeat;
}

Brad Asked this

2 years ago

Thanks for that. 1 more question can you enlarge on mouse over or click on image?

Atick Eashrak Shuvo Staff

2 years ago

which image?

Brad Asked this

2 years ago

The big one in thhe slider.

Atick Eashrak Shuvo Staff

2 years ago

Update the 1st css https://www.joomshaper.com/forum/question/35314#qa-answer-170212

.sppb-addon-sp-slider .sp-background {
    background-size: contain !important;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

mouse hover effect css

.sppb-addon-sp-slider .sp-background:hover {
    transform: scale(1.1); /* Adjust the scale value as per the desired zoom level */
}