En del af problemet var at jeg selv havde samme klasse som eksemplet brugte. '.banner' var defineret, og derfor ødelagde den lidt sig selv.
Derefter forsøgte jeg at omdøbe den til '.banner-pictures', men desværre fik jeg kun lavet første css-select om, så dem der skulle sørge for at slide den valgte ikke den nye css-klasse og derfor virkede det ikke.
I får noget kode senere når jeg kommer hjem
Brugte
Unslider.
Tilføj referencer i <head>-sektionen- <head>
- <script src="//code.jquery.com/jquery-latest.min.js"></script>
- <script src="//unslider.com/unslider.min.js"></script>
- </head>
Lav din slider et sted i dit <body>-tag- <div class="banner-pictures">
- <ul>
- <li>
- <img src="image1.png" />
- </li>
- <li>
- <img src="house.png" />
- </li>
- <li>
- <img src="idea.jpg" />
- </li>
- <li>
- Slider tekst kan også skrives
- </li>
- </ul>
- </div>
Style det så slideren faktisk kan fungere (i <head> eller i et stylesheet)- <style>
- .banner-pictures { position: relative; overflow: auto; }
- .banner-pictures li { list-style: none; }
- .banner-pictures ul li { float: left; }
- </style>
Sæt den i gang via javascript/jquery (enten i <head> med en document-ready, på siden efter style og markup, eller via en js-fil)- <script>
- $('.banner-pictures').unslider({
- speed: 1000, // The speed to animate each slide (in milliseconds)
- delay: 6000, // The delay between slide animations (in milliseconds)
- complete: function () { }, // A function that gets called after every slide animation
- keys: true, // Enable keyboard (left, right) arrow shortcuts
- dots: true, // Display dot navigation
- fluid: false // Support responsive design. May break non-responsive designs
- });
- </script>
Indlæg senest redigeret d. 02.07.2014 19:56 af Bruger #17215