Replacing carousel control buttons

  • Resolved dhiskett

    (@dhiskett)


    9 years, 3 months ago

    Hi, I’m having some trouble replacing the default carousel next/previous buttons with my own images with the proper positioning. I’ve managed to replace the images, simply by changing the backgrounds of ‘.carousel-control.right’ and ‘.carousel-control.left’ and setting the display for the original glyphs to ‘none’.

    The issue I’m facing is that I want to set the button positions so they’re relative to the carousel box, as opposed to the outer edges of the page. I’ve tried playing round with the position of all the carousel divs but can’t seem to find a way to do this. Is there an easy way to achieve this?

    I want the buttons to be ~20px away from the edges of the carousel images, and if possible move inside the carousel image when page width is =<900px.

    Thanks for your time,

    D Hiskett

    https://wordpress.org/plugins/cpt-bootstrap-carousel/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Phil Ewels

    (@tallphil)

    9 years, 3 months ago

    Hi there,

    This is kind of a CSS issue, rather than anything to do with the plugin; stack exchange and other sites might give you a better response. I’ll see what I can do though. Is your site live somewhere? It’s pretty difficult to advise without seeing the context that the carousel is in. It certainly sounds like what you’re proposing should be possible though.

    Do you know about CSS media queries? There’s a good article on css-tricks about them which is worth googling if not (apologies, on my phone with dodgy wifi currently).

    Cheers,

    Phil

    Thread Starter dhiskett

    (@dhiskett)

    9 years, 3 months ago

    Hi Phil,

    Thanks for the reply. Unfortunately it’s on a local test site so I can’t demonstrate it. I’ve taken some screenshots to hopefully make it a bit clearer. This is what it’s like with the default settings:-

    Full size window: http://i.imgur.com/CvHHUTv.png

    Min width of website: http://i.imgur.com/u7Qkjwk.png

    With the default settings, the carousel next/previous buttons are positioned relative to the outer edges of the screen, however I want to position them relative to the carousel image. Like this:

    View post on imgur.com

    Is this anything you could help with or is this purely a css issue?

    Thanks Phil,
    David

    Plugin Author Phil Ewels

    (@tallphil)

    9 years, 3 months ago

    This is purely a CSS / templating issue. Site looks nice! You need to get the carousel to display within some kind of container <div> which has the width of the page content, then it will be limited to that width, with the arrows on top of the image. Next, you’ll want to add some CSS specific to wider screens with some negative margins to move the arrows outside of that div (probably cleaner ways to do this, but that should work). You’ll probably want to hide the grey shadow too.

    If you’re using bootstrap, check out the grid system, which does most of this layout stuff for you.

    I think that should do it! Let me know if you run into any problems.

    Phil

    Thread Starter dhiskett

    (@dhiskett)

    9 years, 3 months ago

    Hi Phil,

    Thanks a lot for your help, I really appreciate it!

    Unfortunately I’ve been pushed to get something presentable ASAP so I had to go with a different plugin that had what I was after as default

    Thanks Phil,
    David

    Plugin Author Phil Ewels

    (@tallphil)

    9 years, 2 months ago

    No problem – thanks for letting me know.

    Phil

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Replacing carousel control buttons’ is closed to new replies.