pseudo-title

Image-Slider-Maker

Responsive Slideshow with multiple effects

Quelle: imageslidermaker.com

 

 

  1. Caption-Text
  2. Caption-Text
    für zweites Bild
  3. Caption-Text
    für drittes Bild

Vorbereitung

Dateien auf eine versteckte Seite hochladen (Jimdo-Download- Element) und Pfade kopieren (rechte Maustaste: Adresse des Links kopieren)

Download
my-slider.css
Cascading Style Sheet Datei 14.1 KB
Download
ism-2.2.min.js
js File 26.7 KB

Download
flower-729514_1280.jpg
JPG Bild 75.9 KB
Download
beautiful-701678_1280.jpg
JPG Bild 102.6 KB
Download
summer-192179_1280.jpg
JPG Bild 217.2 KB

Head-Bereich

(Menü > Einstellungen > Head Bearbeiten)

 

<link type="text/css" media="all" href="/app/download/10744713021/my-slider.css?t=1488076910" rel="stylesheet"/>

<script src="https://redesign-berlin-seminar.jimdo.com/app/download/10744714421/ism-2.2.min.js" type="text/javascript">

</script>

html-Widget

 

<div class="ism-slider" id="my-slider">

    <ol>

        <li>

            <img src="https://tokyo-test-redesign.jimdo.com/app/download/12825327627/beautiful-701678_1280.jpg" alt="" />

            <div class="ism-caption ism-caption-0">

                Caption-Text

            </div>

        </li>

        <li>

            <img src="https://tokyo-test-redesign.jimdo.com/app/download/12825330127/summer-192179_1280.jpg" alt="" />

            <div class="ism-caption ism-caption-0">

                Caption-Text<br />

                für zweites Bild

            </div>

        </li>

        <li>

            <img src="https://tokyo-test-redesign.jimdo.com/app/download/12825330327/flower-729514_1280.jpg" alt="" />

            <div class="ism-caption ism-caption-0">

                Caption-Text<br />

                für drittes Bild

            </div>

        </li>

    </ol>

</div>

ggf. CSS anpassen (z.B.: Captions)

 

#my-slider .ism-slide-0 .ism-caption-0,

#my-slider .ism-slide-1 .ism-caption-0,

#my-slider .ism-slide-2 .ism-caption-0 {

  font-size: 2.25em;

  font-family: sans-serif;

  position: absolute;

  top: 4%;

  left: 5%;

  border-radius: 4px;

  border: none;

  color: #fff;

  background-color: rgba(20, 20, 20, 0.20);

}