Image slider from list of images.

shorn's Avatar

shorn

15 Nov, 2012 09:34 PM

Hi there,

Like the slider. I am trying to utilise it in a single page detail, where by several images are generate as an unordered list.
Is there any info on how to achieve this with your slider?

  1. Support Staff 1 Posted by Dmitry Semenov on 16 Nov, 2012 08:02 AM

    Dmitry Semenov's Avatar

    Hi,

    You can use any markup you wish, all child element of .royalSlider wll be treated as a slide.

    Dmitry

  2. 2 Posted by shorn on 16 Nov, 2012 08:07 AM

    shorn's Avatar

    OK, so an unordered list of images will rendered as slides? Thats great. I will have a play!

  3. Support Staff 3 Posted by Dmitry Semenov on 16 Nov, 2012 08:19 AM

    Dmitry Semenov's Avatar

    yes, tag names doesn't matter.

    Dmitry

  4. 4 Posted by shorn on 16 Nov, 2012 09:23 AM

    shorn's Avatar

    Hmmm, maybe you can help a little with the markup.

    This is what I've got:
    
                    <div id="full-width-slider" class="royalSlider heroSlider rsMinW">
                    <ul>
                    <li>
                      <div class="rsContent">
                        <img class="rsImg" src="images/3206833_c13fbab9.jpg" alt="" />
                        <div class="infoBlock infoBlockLeftBlack rsABlock rsNoDrag" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
                          <h4>This is an animated block, add any number of them to any type of slide</h4>
                          <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="rsContent">
                        <img class="rsImg" src="images/3206833_c13fbab9.jpg" alt="" />
                        <div class="infoBlock infoBlockLeftBlack rsABlock rsNoDrag" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
                          <h4>This is an animated block, add any number of them to any type of slide</h4>
                          <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
                        </div>
                      </div>
                    </li>
                    </ul>
                    </div>
    

    But this is rendered as one image below the next.Any idea on what I need to change? Thanks!

  5. Support Staff 5 Posted by Dmitry Semenov on 16 Nov, 2012 04:04 PM

    Dmitry Semenov's Avatar

    "all child elements will be treated as a slide". You've got one child - ul. It should be:

    <ul id="full-width-slider" class="royalSlider heroSlider rsMinW">
                    <li>
                      <div class="rsContent">
                        <img class="rsImg" src="images/3206833_c13fbab9.jpg" alt="" />
                        <div class="infoBlock infoBlockLeftBlack rsABlock rsNoDrag" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
                          <h4>This is an animated block, add any number of them to any type of slide</h4>
                          <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="rsContent">
                        <img class="rsImg" src="images/3206833_c13fbab9.jpg" alt="" />
                        <div class="infoBlock infoBlockLeftBlack rsABlock rsNoDrag" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
                          <h4>This is an animated block, add any number of them to any type of slide</h4>
                          <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
                        </div>
                      </div>
                    </li>
    </ul>
    
  6. 6 Posted by shorn on 17 Nov, 2012 04:06 PM

    shorn's Avatar

    Right! I get it now, I've tried this and its working. Thank you!

    I am however having another issue with regards to the images displaying correctly. They are getting pulled out of shape.
    I'm running slightly different media queries than the template example.

    I have...

    @media only screen and (min-width: 768px) and (max-width: 959px) 
    @media only screen and (min-width: 480px) and (max-width: 767px)
    @media only screen and (max-width: 767px)
    

    Now I've tried just setting the height in these to my required heights (something like, 480px, 480px & 300px,)

    But that is not working, and the photos that I add (testing with 640x480 images) are not maintaining the right aspect ratio, and are cutting off to the right showing the background.

    Any ideas on what I need to change? Thanks!

  7. Support Staff 7 Posted by Dmitry Semenov on 18 Nov, 2012 12:47 PM

    Dmitry Semenov's Avatar

    Send me a link to this page and tell me how exactly you want them to display and I'll tell you what's wrong.

    Dmitry

  8. 8 Posted by shorn on 18 Nov, 2012 05:31 PM

    shorn's Avatar

    Hi,

    http://dev.walkiees.co.uk/mobile_template/walk.html

    Heres the page. At the moment the slider has three images. All at 640x480px in size. When you resize the browser it's almost correct, but (for example) if you have a look at it in the mobile view, you can see that each image changes the aspect ratio.
    Also at full size, the "photo" credit is lost.

    Any ideas?

    I basically want a slider that will keep the photos aspect ratio throughout the responsiveness. My CMS will output all images at a specified size, so every image i add to the slider will be the same size. Not sure if using the full width slider is the best way. I also want the minimal basic white controls to show throughout the sizes.

    Any hep is greatly appreciated! Many thanks,
    Sean

  9. Support Staff 9 Posted by Dmitry Semenov on 18 Nov, 2012 07:38 PM

    Dmitry Semenov's Avatar

    Just set width of .royalSlider to 100% and enable autoScaleSlider with ratio that matches your image dimensions. http://dimsemenov.com/plugins/royal-slider/documentation/#options

    Don't apply any CSS properties to slider element or it's images.

    Dmitry

  10. 10 Posted by shorn on 18 Nov, 2012 11:42 PM

    shorn's Avatar

    That's brilliant, got the figured now! Many thanks,

    Just one more thing. When I load the page up, you momentary can see all the images flash up (vertically) before they fall into place.
    Is there anyway to prevent this?

    Thanks!

  11. Support Staff 11 Posted by Dmitry Semenov on 19 Nov, 2012 07:20 AM

    Dmitry Semenov's Avatar
  12. 12 Posted by shorn on 22 Nov, 2012 04:52 PM

    shorn's Avatar

    Brilliant, sorted!

  13. 13 Posted by shorn on 22 Nov, 2012 07:04 PM

    shorn's Avatar

    I take that back, it's still not working. Ive tried all the suggestions on the link, but the images are still flashing up.

    <ul id="full-width-slider" class="royalSlider rsMinW">
                   
                   <li>
                     <div class="rsContent">
                       <img src="images/pic1.jpg" alt="" />
                       <span class="photosBy rsNoDrag rsAbsoluteEl" data-fade-effect="false" data-move-offset="40" data-move-effect="bottom" data-speed="200">Photo by Sean</span>
                     </div>
                   </li>
                   
                   <li>
                     <div class="rsContent">
                       <img src="images/pic2.jpg" alt="" />
                       <span class="photosBy rsNoDrag rsAbsoluteEl" data-fade-effect="false" data-move-offset="40" data-move-effect="bottom" data-speed="200">Photo by Jill</span>
                     </div>
                   </li>
                   
                   <li>
                     <div class="rsContent">
                       <img src="images/pic3.jpg" alt="" />
                       <span class="photosBy rsNoDrag rsAbsoluteEl" data-fade-effect="false" data-move-offset="40" data-move-effect="bottom" data-speed="200">Photo by Freddie</span>
                     </div>
                   </li>
                   
                   <li>
                     <div class="rsContent">
                       <img src="images/pic2.jpg" alt="" />
                       <span class="photosBy rsNoDrag rsAbsoluteEl" data-fade-effect="false" data-move-offset="40" data-move-effect="bottom" data-speed="200">Photo by Someone Else</span>
                     </div>
                   </li>
                   
                    </ul>
            </div>
    

    I have a pretty simple HTML mark up, but I still do not seem to be able to stop this happening. Any further help would be much appreciated! Thanks!

  14. Support Staff 14 Posted by Dmitry Semenov on 23 Nov, 2012 07:27 AM

    Dmitry Semenov's Avatar

    Hi,

    So what exactly method have you tried from here http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slid... ?

    Dmitry

  15. 15 Posted by shorn on 23 Nov, 2012 01:56 PM

    shorn's Avatar

    Well as the slides show under each other, I tried...

    .royalSlider { overflow:hidden }
    

    But that didn't work, and I have tried,

    .royalSlider > rsContent {
       float: left;
    }
    

    and a combination of everything else in-between!

  16. Support Staff 16 Posted by Dmitry Semenov on 24 Nov, 2012 08:34 AM

    Dmitry Semenov's Avatar

    Disable javascript in your browser and style the slider so it look appealing to you.

    And class selector should start with dot symbol.

    .royalSlider > .rsContent {
       float: left;
    }
    

    Dmitry

  17. 17 Posted by shorn on 24 Nov, 2012 10:08 AM

    shorn's Avatar

    Thanks for that however, when I add that it does not change anything or stop it.

    (See screenshot)

  18. Support Staff 18 Posted by Dmitry Semenov on 24 Nov, 2012 10:39 AM

    Dmitry Semenov's Avatar

    If you wish to see just first image, add overflow:hidden, like so:

    .royalSlider {
        overflow: hidden;
        width: 100%;
        height: 400px;
    }
    

    http://css-tricks.com/the-css-overflow-property/

    Dmitry

  19. 19 Posted by shorn on 24 Nov, 2012 02:18 PM

    shorn's Avatar

    Thats brilliant!

    Just tested and working as I had hoped now. Many thanks.
    I just need to a a few different heights to my media queries, but thats easy enough.

    Many thanks for your help, its really appreciated! :)

  20. Dmitry Semenov closed this discussion on 24 Nov, 2012 09:10 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac