Hello all,
I have made custom slider in my store, but the slider is not full width.. there is a space before and after the slider.
i have used the below HTML, CSS, Javascript to implement this.
Could anyone tell me how to change it to full width?
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
Automatic Slideshow
Change image every 2 seconds:
1 / 3
![]()
Caption Text
2 / 3
![]()
Caption Two
3 / 3
![]()
Caption Three
2 Likes
Hello @Ponmalar
Welcome to our page. My name is Damimond. I’m a shopify partner.
I’m so happy to help you on your website but I need more information such as your shopify store link.
Best regards
@Ponmalar
oh sorry for any issue can you please send store url so i will check and guide you
1 Like
Hi @Ponmalar ,
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
@Ponmalar
yes, please add this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
#shopify-section-1650166123c5ad0a90 .page-width {padding: 0;max-width: 100%;}
2 Likes
Thanks Ketan it worked.
Can you also help me to remove the extra spaces in between each content.
1 Like
@Ponmalar
thanks, yes please add this code also
.template-index .main-content {padding-top: 0;}
#shopify-section-1647076815b1ea6540 {padding-bottom: 0;margin-bottom: -120px;}
2 Likes
Thanks KetanKumar for your help..
1 Like
@KetanKumar - I am sorry to ask you more..
The slideshow which i am having is automated slide show - arrows are not working when it is automatic. i want user to see the previous and next slides eventhough it is automatic slideshow. will you be able to help? the code is my initial post.
1 Like
@Ponmalar
no rush thanks for the update yes, please check your theme.js file may be allow this option
1 Like
can you help me the code i have to change in javascript?
tis is the script that i have.
1 Like
@Ponmalar
thanks but i can’t see funation
I am not sure what i missed, i used automatic slideshow from w3schools
https://www.w3schools.com/howto/howto_js_slideshow.asp
@KetanKumar - i have one issue, when i see in desktop there is no issue, but in mobile i have below overlap issue. Please let me know the modification that i have to do.
1 Like
@Ponmalar
oh sorry for that issue if you are able to code please use this Slick Slider code easy to manage desktop and mobile its work as well
