-1

Finally trying to learn responsive design and needed a slideshow. I was able to easily get Owl Carousel up and running on one page and love it (right above footer on test page): http://cismiami.org/new.html

I'd like to tweak the slideshow to use for staff photos: http://cismiami.org/owlstaff.html

I found instructions for switching to arrows and getting them on the same line as the images, but cannot figure out how to get them to appear outside the image carousel instead of superimposed on them. I'm using a separate folder for the CSS files so I don't mess up the first sample, but here are my CSS files for the Staff page:

http://cismiami.org/js/owlstaff/assets/owl.carousel.css http://cismiami.org/js/owlstaff/assets/owl.theme.default.css

Any help would be greatly appreciated.

dmwhipp
  • 11
  • 3
  • I clarified the question. Please also paste your code here, not a link... otherwise when the link goes away, the question becomes useless. –  Mar 02 '18 at 11:51

1 Answers1

0

I'm not a professional (just a hobbyist), but would like to think i know bit of this and that. It's difficult to test this myself since most of the assets are elsewhere and you're working on someone else's code, which itself is often messy to begin with. If you would've designed and coded it from the ground-up, you would know exactly how to do it. Learning so much in the process.

Anyways, in 'owl.theme.default.css' the arrows can be customized as you said. The quick and dirty method (and bad solution in this case) of getting the arrows outside of Carousel would be to add a negative positional value to left and right arrows. Since they are absolutely positioned, they can be moved around quite freely but are not exactly responsive on their own. This following method is breaking their intended purpose, staying on top of the pictures and thus with the flow.

Add negative value to left and right, say 40px: .owl-prev { left: -40px; } .owl-next { right: -40px; }

This will however break the responsiveness, since once you start scaling down the page, the arrows will disappear outside of the flow of the page. They are absolutely positioned after all, and reliant on their parent / container objects. Maybe there's a way they can shift back to these original positions once scaled down enough but it's difficult to say from these bare messy beginnings. So many things can go wrong. Maybe Media Query methods once it reaches certain pixel count, then changes to left:0; right:0;? I haven't used them myself, but will need to with my current project soon enough.

In my opinion, shifting the arrows outside of the nice responsive design is also against the look of the site. It'll break the cohesion. To me these arrows look absolutely fine on top of the pictures and hardly intrusive. Maybe adding some transparency / opacity to the arrows would make them less problematic to your eye, hover over them could resume their current visibility? That's about it for now.

Riviner
  • 17
  • 7