Results 1 to 5 of 5

Thread: Slider Code - Where does it go?

  1. #1
    Join Date
    Feb 2012
    Posts
    37

    Default Slider Code - Where does it go?

    Hi All,

    I am normally really good at this but can't seem to get this to work...it is a free responsive slider I was to trial, it has about 20 styles which are all free, I can normally break the code down and put in the correct places (Head, Opening, Closing and Page)...but just can't get this one....can anyone break the below code down?

    Appreciate the forums help as always.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">


    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">


    <!-- Demo styles -->
    <style>
    html, body {
    position: relative;
    height: 100%;
    }
    body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
    }
    .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    }
    .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }
    </style>
    </head>
    <body>
    <!-- Swiper -->
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    </div>


    <!-- Swiper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>


    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    loop: true
    });
    </script>
    </body>
    </html>

  2. #2
    Join Date
    Jun 2010
    Location
    Brighton, UK
    Posts
    417

    Default

    Morning

    Are you just using the slider on one page or multiple?

  3. #3
    Join Date
    Feb 2012
    Posts
    37

    Default

    Hi Shelley,

    I was just going to use it on the home page....but not you mention it, it could be good to use on other pages as well if possible?

    Thank you.

  4. #4
    Join Date
    Jun 2010
    Location
    Brighton, UK
    Posts
    417

    Default

    Had a quick test of that code and couldn't get it to work, sorry mate

  5. #5
    Join Date
    Feb 2012
    Posts
    37

    Default

    No problem....appreciate you trying ...I shall find some friendlier code....

    Happy Christmas.

Similar Threads

  1. Where does everyone have their Thawte seal?
    By Deefer in forum Bluepark Technical Discussion
    Replies: 3
    Last Post: 24-05-2015, 15:53
  2. Google Shopping - EAN codes, where to go?
    By bubble in forum Bluepark Technical Discussion
    Replies: 4
    Last Post: 04-05-2011, 18:00
  3. Where does the image in my header keep disappearing to?
    By pinkypie in forum Bluepark Technical Discussion
    Replies: 4
    Last Post: 07-04-2011, 13:45
  4. Where to put this code
    By Gillf in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 15-05-2009, 13:14

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About us

Bluepark's ecommerce software is developed, hosted and supported exclusively by ourselves, here in the UK, and has been so since the company was initially formed in 2004. Your brand new online shop will be hosted securely on our fast and reliable server network, using a domain name of your choice, providing the ability to build and maintain your ecommerce website, and manage your orders, from any location via your own secure online Administration Console.

A Bluepark ecommerce site is the perfect tool for selling online, whether you're selling physical products, digital downloads or services. You'll be in good company with over 1,000 UK customers who also form a friendly and helpful online community, further strengthening our highly acclaimed support network.

Find us on...