0

I am redesigning a website and am upgrading from jquery cycle to jquery cycle 2. I am using the cycle as a latest news/events and so each of my slides is a div containing an image which acts as a link.

http://www.fbclovis.com/newsite

However, as you'll see, the images are in the top left corner of my container div instead being nicely centered. I have set the container padding to 15px which will make things pretty but it is being ignored. This issue only occurs when I set the "data-cycle-slides" cycle option to "> div.promo". If I just have images outside of divs it behaves just fine. It also works if I set the margin of the slides to 15px and set the padding of the container to 0px - but this isn't correct coding and I like to try to be semantic.

So why is jquery cycle 2 ignoring the padding of the slideshow container?

Andrew Giles
  • 11
  • 1

1 Answers1

0

You have an error in your html markup, see the closing > is not where it should be. Post here your html in case you can not find the problem.

<div id="main">
    <div id="main-content" class="content-section">
        <div id="promo-cycle" class="cycle-slideshow"
            data-cycle-fx="fade"
            data-cycle-timeout=4000
            data-cycle-slides="> div.promo"
            data-cycle-caption="#custom-cycle-caption"
            data-cycle-caption-template="<span class='caption-title'>{{title}}</span><br /><span class='caption-desc'>{{desc}}</span>"
            data-cycle-center-horz=true
            data-cycle-center-vert=true
        >
            <div class="cycle-pager"></div>
Plamen
  • 320
  • 4
  • 19