jQuery Mobile Slider

Discussion in 'HTML & Website Design' started by hallo000, Jul 15, 2015.

  1. #1
    Hello,

    I am writing the HTML Code for a mobile Website. In the section "Home" I want to have a Slider-Show. For that I read http://www.slidesjs.com/

    The Problem:
    Pictures are shown, but they are not in a "Slider". Additionally they are way to big, but I defined height and width.

    Code:

    <!DOCTYPE html>
    <html lang="de">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Robots" content="index, follow">
    <meta name="Description" content="xxx">
    <meta name="Keywords" content="Deine Keywords">
    <title>xxx</title>


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="Scripts/jquery.slides.min.js"></script>


    <script>

    $(function(){
    $("#slides").slidesjs({
    width: 100,
    height: 100,
    play: {
    active: true,
    // [boolean] Generate the play and stop buttons.
    // You cannot use your own buttons. Sorry.
    effect: "slide",
    // [string] Can be either "slide" or "fade".
    interval: 5000,
    // [number] Time spent on each slide in milliseconds.
    auto: false,
    // [boolean] Start playing the slideshow on load.
    swap: true,
    // [boolean] show/hide stop and play buttons
    pauseOnHover: false,
    // [boolean] pause a playing slideshow on hover
    restartDelay: 2500
    // [number] restart delay on inactive slideshow
    }
    });
    });

    </script>


    <style>
    a#meinlink:hover {color:white;}
    </style>

    </head>

    <body>

    <div id="slides">
    <img src="images/1.JPG">
    <img src="images/2.JPG">
    </div>

    <div data-role="page">

    <!-- Header -->
    <div data-role="header">
    <h1>xxx</h1>
    <span style="font-size:1.5em">
    </div><!-- /header -->

    <!-- Content -->
    <div data-role="content">

    <!-- Accordion -->
    <div data-role="collapsible-set" data-content-theme="c">
     
    hallo000, Jul 15, 2015 IP