Slideshow issue - Post ID 241807

User 2686783 Photo


Registered User
84 posts

I need help with making a slideshow responsive. Let me start off by saying I am not a coder. The website I manage, cbcr.org, is the first and only website I have ever made. I am now ready to take it to the next level and make it responsive. I know a number of you use the WOW slider and I wish I could use it because then I could just follow the video on how to add it to RLM, but it does not meet my needs. I need a manual slideshow that can handle different size photos and I can add photos to in the future. I also need to be able to easily have multiple slideshows on a page without have to use a unique ID every time I add a slideshow to the page. And I need to be able to easily move a slideshow from one page to another. For those reasons, I thought the Basic jQuery Slider (http://basic-slider.com) would be the best one to use. I have managed to get multiple sliders on a page, use different size photos, have the ability to easily add photos, etc. However, for some reason, it is not responsive even though it is suppose to be. Now, if you were to tell me that it didn’t have to be responsive in order for it to work in RLM, I would jump for joy, but I suspect that is not the case.

You can see my test page with two sliders at http://cbcr.org/bjqs2.html The slider does not resize the way it should, which is really evident on an iPhone. I suspect the problem is with the jQuery, although maybe I messed up the css. I did change lines 189 and 190 in the js, but that does not appear to be the problem. I thought maybe the issue discussed at https://github.com/jcobb/basic-jquery-slider/issues/175 was the same as mine, but the proposed solution did not help.

I will also mention, when you go to the Basic jQuery Slider website and shrink down your browser, it does not appear that the slider is responsive, you have to refresh your browser to see the resized slider.
User 187934 Photo


Senior Advisor
20,245 posts

That slider is not meant to be responsive. Try flex slider.
http://flexslider.woothemes.com/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2686783 Photo


Registered User
84 posts

Can you explain why it is not suppose to be responsive? It shows responsive as being one of the options of the slider.

I will check out the flexslider, but I am not sure it will handle having all the different size photos in the slider. Photos get sent to me from many different people and they are all different sizes and aspect ratios.
User 187934 Photo


Senior Advisor
20,245 posts

Did you set yours to be responsive? I was only going by the demo on that page.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2686783 Photo


Registered User
84 posts

Yes, responsive is set to true.
User 171749 Photo


Registered User
91 posts

User 187934 Photo


Senior Advisor
20,245 posts

It looks to be this on your CBCRcss2.css line 56. Drop the width and height completely or try max or min.
.dogslider500 {
background: none repeat scroll 0 0 #fff;
height: 500px;
margin: 0 auto;
position: absolute;
width: 650px;
}

Then line 64 for slider two.
.dogslider400 {
background: none repeat scroll 0 0 #fff;
height: 400px;
margin: 0 auto;
position: absolute;
width: 650px;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2686783 Photo


Registered User
84 posts

Mark - no I hadn't see that, but I don't have any anchors

Eric - If I drop the height and width or change them to max-height and max-width, the images completely disappear.
User 187934 Photo


Senior Advisor
20,245 posts

Try this.
.dogslider500 {
margin:0 auto;
}

.dogslider400 {
margin:0 auto;
}

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2686783 Photo


Registered User
84 posts

Am I allowed to shout?? WOOHOO!! Thank you so much for fixing it.

I have one further question, is there a way to get the slide numbers to shrink a bit depending on the browser size? Notice when you view it in a mobile phone size the numbers end up on top of the words "Return to Homepage". And, I will have to see what happens in mobile view when I have a lot of images in the slider - will they end up being too wide?

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.