FANDOM


 
Line 56: Line 56:
 
*Slide 3 Content
 
*Slide 3 Content
 
</div>
 
</div>
  +
This way, if a viewer doesn't have the JS running for some reason, they will still be able to see the quotes as a regular list.

Latest revision as of 06:15, November 6, 2019

Sort of. But I am not talking about CSS. JS is a different page. Which wiki are you trying to do this on? We can go forward with the other parts but it won't work until we get the JS setup.

Since you know how to add to your site CSS, go ahead and copy the following example.

.ListSlider.active {
    height: 100px;
    min-height: 100px;
}
 
.ListSlider.active ul,
.ListSlider.active ol {
    list-style-type: none;
    position: relative;
    margin: 0;
    height: 100%;
    overflow: hidden;
}
 
.ListSlider.active li {
    display: block;
    position: absolute;
    margin: 0;
    left: 100%;
    width: 100%;
    height: 100%;
}
 
.ListSlider.active .current {
    left: 0;
}
 
.ListSlider.active [class*=transition] {
    transition: left 1s linear;
}
 
.ListSlider.active .transition-out {
    left: -100%;
}

On a test page, you can also create some example page content. What you want to do is create a list (bullet or numbered) with each slide content as a list item. Then place the list in a div tag and give "ListSlider" as a word in the div's class attribute. For example:

<div class="ListSlider">
*Slide 1 Content
*Slide 2 Content
*Slide 3 Content
</div>

One thing to note is that, since we are using lists, the content of the slides is limited to whatever you can put in a list item. For example, you cannot put a syntaxhighlight tag (what I used for the example CSS) in a list so you can't put it in the slider. However, you can put something like an image, template call, or, with some care, a div tag.


Edit:

One thing I forgot to mention is that, if the JS isn't running (there could be multiple reasons), the slider should appear as a normal list. Using my example above, if the JS isn't running, it should look like:

  • Slide 1 Content
  • Slide 2 Content
  • Slide 3 Content

This way, if a viewer doesn't have the JS running for some reason, they will still be able to see the quotes as a regular list.

Community content is available under CC-BY-SA unless otherwise noted.