The slider on homepage of RoyalSlider demo site

mats.wetterlund's Avatar

mats.wetterlund

13 Sep, 2012 07:17 AM

Hi,
I have a customer that found this slider and want to use it on their site. I think it looks really good and have a lot of options, but I think it is a little hard to understand the documentation and combine the right html and options to get things to work and exactly what to expect of each option.

But I can't figure out how to get any of the templates look like the slider that is on the Live Preview page (http://dimsemenov.com/plugins/royal-slider/?s=cc). Basically it's the tabs I can't figure out how to get them not to wrap on several rows and so they scroll when the slider changes.

Have you used any of the templates to create this slider, if yes which?
What modifications and/or options needs to be set to get the thumbs scrollable and have arrows to scroll them?

I'm thankful for any help I get.

Best Regards

  1. Support Staff 1 Posted by Dmitry Semenov on 13 Sep, 2012 07:18 PM

    Dmitry Semenov's Avatar

    Hello,

    The slider on homepage is just simple slider with thumbnails, but instead of images text is used. http://dimsemenov.com/plugins/royal-slider/documentation/#thumbnails

    You may just view source code of homepage and copy it to your project, I also pasted it here:

    CSS:

          #homeSlider {
            font-weight: bold;
          }
          #homeSlider .rsThumbsHor {
            height: 44px;
            padding: 0;
          }
          #homeSlider .example-link {
            padding: 5px 12px 6px;
            color: #FFF;
            background: #FFF;
            position: absolute;
            color: #BB0202;
            right: 12px;
            bottom: 12px;
            text-decoration: none;
            font-weight: normal;
          }
          #homeSlider .example-link:hover {
            text-decoration: none;
            background: #C00;
            color: #FFF;
          }
          .rsWebkit3d .example-link {
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0);
          }
          #homeSlider .rsThumb {
            width: 172px;
            height: 44px;
            cursor: pointer;
          }
          #homeSlider .rsTmb {
            text-align: center;
            margin-top: 11px;
            font-weight: bold;
          }
          #homeSlider .rsThumb i {
            font-style: normal;
            font-weight: bold;
          }
          
          .rsSlideTitle {
            font-size: 24px;
            padding: 11px 13px 14px;
            background: #c00;
            background: rgba(220,0,0,0.6);
            color: #FFF;
            font-weight: normal;
          }
          .rsFirstSlideTitle {
            left: 12%;
            top: 74px;
          }
          .rsSecondSlideTitle {
           left: 12%;
            top: 124px;
          }
          @media screen and (min-width: 0px) and (max-width: 960px) {
            .rsSlideTitle {
              font-size: 18px;
              padding: 10px 12px 12px;
            }
            .rsFirstSlideTitle {
              left: 8%;
              top: 54px;
            }
            .rsSecondSlideTitle {
             left: 8%;
              top: 99px;
            }
            #homeSlider .rsThumb {
              font-size: 12px;
              width: 115px;
              height: 44px;
              cursor: pointer;
            }
            #homeSlider .rsTmb {
             margin-top: 12px;
            }
          }
            @media screen and (min-width: 0px) and (max-width: 500px) {
            .royalSlider {
              height: 300px !important;
            }
              .rsSlideTitle {
              font-size: 14px;
              padding: 8px 10px 8px;
            }
             .rsFirstSlideTitle {
                left: 24px;
                top: 24px;
              }
              .rsSecondSlideTitle {
               left: 24px;
                top: 63px;
              }
           }
    

    JS:

          jQuery(document).ready(function($) {
            var sliderJQ = $('#homeSlider').royalSlider({
              controlNavigation:'thumbnails',
              imageScaleMode: 'fill',
              allowCSS3OnMacWebkit: true,
              arrowsNav: false,
              fullscreen: false,
              loop: true,
              thumbs: {
                firstMargin: false
              },
              autoPlay: {
                enabled: true,
                delay: 2000
              },
              thumbsFirstMargin: false,
              autoScaleSlider: true, 
              autoScaleSliderWidth: 960,
    autoScaleSliderHeight: 600, keyboardNavEnabled: true }); });

    HTML:

        <div id="homeSlider" class="royalSlider rsDefaultInv col span_4 fwImage">
                <!-- slide -->
                <div class="rsContent" data-rsDelay="2500" style="background: #eee;">
                  <a class="rsImg" href="{{site.url}}/img/home.jpg"><i class="rsTmb">New RoyalSlider</i></a>
                  <span class="rsABlock rsFirstSlideTitle rsSlideTitle">The Fastest and Smartest</span>
                  <span class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">Image Gallery and Content Slider Plugin</span>
                </div>
        
                 <!-- slide -->
                <div class="rsContent" data-rsDelay="2500" style="background: #eee;">
                  <a class="rsImg" href="{{site.url}}/img/home.jpg"><i class="rsTmb">New RoyalSlider</i></a>
                  <span class="rsABlock rsFirstSlideTitle rsSlideTitle">The Fastest and Smartest</span>
                  <span class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">Image Gallery and Content Slider Plugin</span>
                </div>
            </div>
    
  2. mats.wetterlund closed this discussion on 09 Nov, 2012 01:29 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