Slider Imagers
Brad
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
Atick Eashrak Shuvo
Accepted AnswerHello Brad,
Could you please provide some screenshots for better understanding of the issue?
Atick Eashrak Shuvo
Accepted AnswerCould 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
Accepted AnswerI 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
Accepted AnswerHello Brad,
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
Accepted AnswerThanks for that. 1 more question can you enlarge on mouse over or click on image?
Brad
Accepted AnswerThe big one in thhe slider.
Atick Eashrak Shuvo
Accepted AnswerUpdate the 1st css 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 */
}