-
Posts
-
Hello!
First off, I love this theme. It is, by far, the best theme I have purchased.
However, I am not a fan of the dots on the slider (especially on mobile). I have a lot of portfolio items to show (I am a photographer) and the dots cover the majority of the image.
Is there any custom CSS I can input to change the slider dots to show quantity of images?
\\\ I would like it to look like this: 1/25 (where the 1 represents the image currently viewed, and the 25 representing the total number of images in the folio). \\\
Also, it would be nice if this sat centered and below the slider.
Please let me know if this can be done.
Thanks for such an awesome theme!
Hi john651,
Its a bit tricky but this should get you 90% of the way there:
#top.single-portfolio .av_slideshow.avia-slideshow .avia-slideshow-dots a {
background: transparent !important;
border-radius: 0;
text-indent: 0;
padding: 0;
height: auto;
color: #000 !important;
opacity: 1 !important;
}
#top.single-portfolio .avia-slideshow-dots.avia-slideshow-controls {
bottom: -25px;
z-index: 200;
position: static;
width: 98%;
}
#top.single-portfolio .av_slideshow.avia-slideshow .avia-slideshow-dots a{
display: none;
}
#top.single-portfolio .av_slideshow.avia-slideshow .avia-slideshow-dots a.active{
display: inline-block;
}
#top.single-portfolio .av_slideshow.avia-slideshow .avia-slideshow-dots a:last-child:before{
content: "of ";
margin-right: 3px;
}
#top.single-portfolio .av_slideshow.avia-slideshow .avia-slideshow-dots a:last-child{
display: inline-block;
width: auto;
}There will probably be some cross browser tweaks needed and it definitely won’t work in older browsers because of the new css but for newer browser it should work fine.
Regards,
Devin
***My Code has been edited following Peters suggested change below***
Wow, thanks Devin! That gets me almost exactly what I was looking for.
One problem, the number stays at #1…
See here:
http://johnmagnoski.com/main/portfolio/architecture/
I appreciate your help and wonder what I need to do to make the numbers count sequentially?
Aside from that, it looks great!
Use Devin’s code above but replace
#top.single-portfolio .av_slideshow.avia-slideshow .avia-slideshow-dots a:first-child{
display: inline-block;
}with
#top.single-portfolio .av_slideshow.avia-slideshow .avia-slideshow-dots a.active{
display: inline-block;
}This code will work for slide 1-27. The last slide link won’t display properly (because the css code can’t fetch the number of the last slide dynamically and the output “28 of 28” is not possible) but nevertheless it’s a good workaround.
Rats…. that didn’t work. Now there’s just a ton of numbers spanning the bottom of the gallery.
Is there any way to just turn the dots off? My main issue is how they look on mobile.
Thanks guys!
- The topic ‘Slider Dot Navigation?’ is closed to new replies.