Can't get image slider to work

Every image slider tutorial I do, I can't seem to get to work! I'm obviously doing something wrong!! Could someone please point out what it is please? I've been going onto CodePen > typing in responsive image slider > copying the html > creating a separate CSS and JS and linking to them. But when I run the page, nothing happens. What vital ingredient am I missing?
Untitled Document
Thanks.

I agree with you pal - there's no point in trying to be clever if no-one can find the code.
If you want the slider you're talking about then copy the code below and paste into a dreamweaver document and browse - have fun and then go tell code pen they are a pile of shite.
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/MarcoGuglielmelli/pen/ogZWpv" />
<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
body {
  background-color: #979797;
  color: #fff;
  margin: 0em;
  padding: 0em;}
.page {
  max-width: 640px;
  margin: 0px auto 30px auto;}
.panel {
  background-color: #fff;
  color: #666;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  overflow: auto;}
button {
  border: none;}
/********** LOGO **********/
h1 {
  text-align: center;
  width: 200px;
  height: 20px;
  margin: 40px auto 40px auto;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;}
/********** TYPOGRAPHY **********/
body, button {
    font-family: 'Jacques Francois', serif;}
h2, h3 {
  font-weight: normal;
  margin: 0em;}
h2 {
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 230%;
  line-height: 1em;
  padding: 20px 0px 0px 20px;}
h3 {
  font-size: 90%;
  letter-spacing: 0.2em;}
p {
  font-family: 'Quattrocento Sans', sans-serif;
  line-height: 1.4em;}
a {
    text-decoration: none;}
button {
  font-size: 90%;
  text-align: left;
  text-transform: uppercase;}
  /*****************  No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}
.no-js .js-warning {
  display: block;
  border: 3px solid #fff;
  text-align: center;
  background-color: #fff;
  color: #db5391;
  padding: 10px;}
/********** SLIDER **********/
.slider {
  max-width: 940px;
  margin: 0px auto 30px auto;}
.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 430px;}
.slide-group {
    width: 100%;
    height: 100%;
    position: relative;}
.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;}
.slide:first-child {
    display: block;}
/********** BUTTONS **********/
.slide-buttons {
  text-align: center;}
.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
  color: #ed8e6c;
  cursor: pointer;}</style></head><body>
<header><h1>Responsive Slider</h1></header>
<section>
      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
              <img src="http://javascriptbook.com/code/c11/img/slide-1.jpg" alt="No two are the same" />
            </div>
            <div class="slide slide-2">
              <img src="http://javascriptbook.com/code/c11/img/slide-2.jpg" alt="Monsieur Mints"  />
            </div>
            <div class="slide slide-3">
              <img src="http://javascriptbook.com/code/c11/img/slide-3.jpg" alt="The Flower Series"  />
            </div>
            <div class="slide slide-4">
              <img src="http://javascriptbook.com/code/c11/img/slide-4.jpg" alt="Salt o' The Sea"  />
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>
    </section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
$('.slider').each(function () {
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides = $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;
    function move(newIndex) {
        var animateLeft, slideLeft;
        advance();
        if ($group.is(':animated') || currentIndex === newIndex) {
            return;
        buttonArray[currentIndex].removeClass('active');
        buttonArray[newIndex].addClass('active');
        if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft = '-100%';
        } else {
            slideLeft = '-100%';
            animateLeft = '100%';
        $slides.eq(newIndex).css({
            left: slideLeft,
            display: 'block'
        $group.animate({ left: animateLeft }, function () {
            $slides.eq(currentIndex).css({ display: 'none' });
            $slides.eq(newIndex).css({ left: 0 });
            $group.css({ left: 0 });
            currentIndex = newIndex;
    function advance() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            if (currentIndex < $slides.length - 1) {
                move(currentIndex + 1);
            } else {
                move(0);
        }, 4000);
    $.each($slides, function (index) {
        var $button = $('<button type="button" class="slide-btn">&bull;</button>');
        if (index === currentIndex) {
            $button.addClass('active');
        $button.on('click', function () {
            move(index);
        }).appendTo('.slide-buttons');
        buttonArray.push($button);
    advance();
//@ sourceURL=pen.js
</script>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>

Similar Messages

  • How can i get my slide to work again

    i need help trying to get the slide back working any suggestions

    Try:
    - Resetting the iPod. Nothing will be lost
    Reset iPod touch:  Hold down the On/Off button and the Home button at the same time for at
    least ten seconds, until the Apple logo appears.
    - Restore from backup
    - Restore to factory defaults/new iPod
    If you still have the problem than an appointment at the Genius Bar of an Apple store is in order since you likely have a hardware problem.

  • I can't get the volume to work when I watch a you tube video, there's no volume slide under the play button, and my volume control on my I pad won't do anything either, but the volume of all my alarms and sounds works perfect, what can I do??

    I can't get the volume to work when I watch a you tube video, there's no volume slide under the play button and my volume control on my I pad don't do anything to help, but yet my volume works perfect on everything else, what can I do???

    do u have your ipad doing airplay because that could happen

  • How can I get my speaker to work again?

    How can I get my speaker to work again? I've tried turning my phone off and on, hard reset, removing SIM, cleaning out dust, using the hair dryer, network reset, cleaning headphone port, made sure the phone was not on vibrate,and made sure "Change with buttons" was on. There was no liquid/moisture damage.  I was watching a video on youtube and all of a sudden my speaker went out. If I tap on the speaker it goes in and out but does not stay on/loud.

    Do you get sound in any apps e.g. in Music and Videos but not notifications or sound in other apps ? If you do get sound in Music and Videos then have you got notifications muted ? Only notifications (including games) get muted, so the Music and Videos apps, and headphones, still get sound.
    Depending on what you've got Settings > General > Use Side Switch To set to (mute or rotation lock), then you can mute notifications by the switch on the right hand side of the iPad above the volume switch, or via the taskbar : double-click the home button; slide from the left; and it's the icon far left; press home again to exit the taskbar. The function that isn't on the side switch is set via the taskbar instead : http://support.apple.com/kb/HT4085
    If you don't get sound in any apps then have you could try a soft-reset to see if you get sound after the iPad has restarted : press and hold both the sleep and home buttons for about 10 to 15 seconds (ignore the red slider), after which the Apple logo should appear - you won't lose any content, it's the iPad equivalent of a reboot.

  • Can't get the software to work with Audigy 2

    Hi, I have had my Audigy 2 ZS going on a year now and haven't had any problems. I recently made a clean install of Windows XP and upgraded to SP2 and all that. Now, I can get sound out of the card but can't get the software to work at all; cannot get the volume slider bar to appear when I click the icon (it appears in the task bar though and I get a small gray square where the slider should appear), the surround mixer does not show when I double click the volume icon, EAX conxole is a no go, get an empty error box when I try to start the Equaliser.
    I have tried everything from simple re-install to clean sweep to praying to the pagan gods. I have alsoo tried updating the drivers of course.
    I run XP on an Intel MoBo (on-boeard sound deactivated), 52RAM, ATI 9700 ALL-IN-WONDER.
    DOES THE CREATIVE SOFTWARE DEPEND ON ANY WEIRD LITTLE WINDOWS SERVICE OR SETTING THAT I MIGHT HAVE CHANGED DURING SETUP?
    This is quite infuriating as any idea I come up with takes up a lot of time in installation, uninstallation and clean up. It worked before, why not now?
    Thanks in advance. dentore

    Ok I got it to work. This is the reply I got from Creative but I didn't remove the program from the add/remove option on the PC b/c that didn't work at first. I inserted the installation CD and remove it from that wizard. Rebooted and the PC found new hardware. I then installed the driver and software from the CD and now it works.
    For Mediasource. It appears something was corrupted in Mediasource or there is a conflict within the system.Please uninstall all software and drivers for the soundcard, from add/remove programs. Once this is done, shut down the system and changePCI slots for the soundcard, then turn the system back on, cancel the found new hardware wizard, disable all background applications (especially virus scanner, firewall, and any other background applications running in the bottom right hand corner of the system), andthen perform a full reinstallation of the drivers and software from the soundcard installation cd.
    CAT I hope you fix your sound card. Good luck.

  • Can't get my iCloud to work.  What do I do?  It won't let me tap on it in Settings.

    Can't get my iCloud to work.  What do I do?  It won't let me tap on it in Settings.

    What happens when you tap it?
    Try Settings > Store > Apple ID > sing out and back in.
    Try a reset... press the home and sleep/lock buttons until you see the Apple logo, ignoring the slider. Takes about 5-15 secs of button holding and you won't lose any data or settings.

  • I can't get my video toto work

    I can't get my video to work on my iPad.... I have never used it before so today I thought it would be nice to take a video... I did look it up on line but everyone is saying I have to slide the marked video to the middle of the screen, and I have done all that but it still won't work... Thank you

    Swipe up or down on the screen - anywhere on the screen - until the word Video appears in yellow type on the right. That indicates that the video mode has been selected. Then tap on the big red dot to start recording, tap the big red button when you are done recording.

  • Can't get Favicon Icon to Work

    Hi,
    So I can't seem to get my favicon icon to work right. I am using  Dreamweaver CS4 and I have an icon called favicon.ico in my remote  folder.
    Under the head tag I have :
    <link href="favicon.ico" rel="icon">
    If I preview it in dreamweaver it works great and comes up. However,  when I go to the site outside dreamweaver, it doesn't show up. What am I  doing wrong?
    Thanks,
    Ian M
    Btw my site is www.Imicallef.com

    Can I jump on this thread?
    I can only get the favicon to work on my home page, all other pages have identical code at the headers but don't show the favicon.
    I use this code (highlighted in Bold):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon"
       type="image/x-icon"
       href="_assets/favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Toms Tin House: About</title>
    any ideas folks?
    Tom.

  • How can i get ical invitations to work with outlook users?

    how can i get ical invitations to work with outlook users?
    I can send ical meeting invitations but outlook users are having problems having the meeting show up in their calendar….

    My Epson is able to do scans using Image Capture without any problems at all.
    Allan

  • How can I get my iMac to work with scanners?

    How can I get my iMac to work with scanners? The scanners scan just fine, but not to my iMac. I've tried Epson and HP all-in-ones; it makes no diffference. I'm becoming extremely displeased, but don't know at whom I should be displeased, the printer guys or Apple. Help?

    My Epson is able to do scans using Image Capture without any problems at all.
    Allan

  • I can't get my ichat to work.

    i can't get my ichat to work. I made an aol login but it says my password is incorrect, which i know it is not. I have a MobileMe but i can't remember the password to that. Every time I try to change my password it just changes my msn address on apple id. I have ox s lion operating system but, I couln't get the ichat to work before that either. I can use facetime tho.

    HI,
    If you created an AIM Name here then can you now Login Here > https://settings.aim.com/
    AIM allow some other characters that alphanumeric ones but these are limited to ! @ # and the . (full stop/dot)
    Is it possible that you have used other characters in the password ?
    If you created an AOL Login have you used the full name ([email protected]) in the name in iChat ?
    AIM never tell you directly that it is the Password.
    You can get to infer it is the password when compared to other messages but it does normally refer to  "Name or Password".  (I just want to check that is what you are seeing)
    MobileMe Name
    Checking your Own Computer
    Open Keychain Access in the Applications/Utilities folder
    Have the Login item to left highlighted
    Have the Passwords items listed if using lion lower left
    Check the list on the right for your MobileMe name.  It may possibly listed with an Cloud icon or the "A" created by ther pen brush and ruler icon.
    It may also get listed twice or more if you have tried different passwords and asked for them to be saved.
    Double click one.
    In the new Panel that open change to the Access tab and check iChat is in the list if using Allow Specific items.
    Return to the Attributes tab
    Tick the Show Password box  (Dialogue biox appears needing your Mac User Password and to Allow Once
    If this password is correct then delete any other entries.
    If incorrect then check others and edit one if required.
    (I am hoping you will see one you recognise)
    The iForgot site can be used to change the password.
    It requires you have access to the linked email you used.
    Or that you remember the security questions that you gave for the MobileMe name.
    (Presumably you know your Date of Birth which you also get asked. )
    10:03 PM      Saturday; January 21, 2012
    Please, if posting Logs, do not post any Log info after the line "Binary Images for iChat"
      iMac 2.5Ghz 5i 2011 (Lion 10.7.2)
     G4/1GhzDual MDD (Leopard 10.5.8)
     MacBookPro 2Gb (Snow Leopard 10.6.8)
     Mac OS X (10.6.8),
    "Limit the Logs to the Bits above Binary Images."  No, Seriously

  • TS3274 How can I get the volume to work?

    We have an iPad but can't get the volume to work?

    Alright now if you are talking about issues using Safari, here a few things that you can try.
    1. Quit Safari completely and restart the iPad. Go to the home screen first by tapping the home button. Double tap the home button and the task bar will appear with all of your recent/open apps displayed at the bottom. Tap and hold down on any app icon until it begins to wiggle. Tap the minus sign in the upper left corner of the app that you want to close. Tap the home button or anywhere above the task bar. Restart the iPad.
    Restart the iPad by holding down on the sleep button until the red slider appears and then slide to shut off. To power up hold the sleep button until the Apple logo appears and let go of the button.
    2. Reboot the iPad by holding down on the sleep and home buttons at the same time for about 10-15 seconds until the Apple Logo appears - ignore the red slider - let go of the buttons.
    3. Clear Safari. Go to Settings>Safari>Clear History, Cookies and Data. Restart the iPad. Restart the iPad by holding down on the sleep button until the red slider appears and then slide to shut off. To power up hold the sleep button until the Apple logo appears and let go of the button.

  • Real Player download not working since I updated FF.... It didn't work with the latest version of FF so I reinstalled vrevious FF but still can't get Real Player to work again.

    I lost the Real Player download capabillity when FF updated to FF4..... The plug ins for Real Player still show on the add on screen but no " download this video" shows when I mouse over a video.... I tried reverting to earlier version of FF which had worked well for Real Player donloads but it no longer works either.
    How can I get Real Player to work with FF again?

    Many thanks b Noir
    This is a copy of ONEof the keys  in the registry I changed  as told by Apple support today. I also have changed others as instructed by GEAR  software support to manually delete GEAR drivers (that I had installed but couldn't delete some of the others  they mentioned from Windows system 32. Then some bright spark at work told me I need the Gear drivers so  I downloaded the software and installed again.
    Sorry, just this minute went to insert image  and it is giving me a message saying this sort of content  is not allowed?.
    The most recent key I altered is in: HKey _local _machine. System\class - 4D36E965-E325-11CEBFC1-08002BE10318. Upper Filter data: Upper filter NTIDrvr  SiRem GEARAspiWDN.
    The GEARsoftware info about manually deleting  GEAR drive is from:
    http://www.gearsoftware.com/wiki/index.php?title=DRIVERS:_Windows_-_Updating%2C_ removing%2C_64_bit_versions%2C_etc
    I hope you can help

  • I can not get the slide on my Iphone to slide so I can unlock it

    We have tried everything that we can think of to get the slide to work on my Iphone 4? Please help

    Hello there, Belltigeress.
    The following Knowledge Base article provides some great steps and additional options for troubleshooting issues with touchscreen response:
    iPhone, iPad, iPod touch: Troubleshooting touchscreen response
    http://support.apple.com/kb/TS1827
    If your device is experiencing any of the symptoms listed above, try the following steps:
    Restart your device
    Hold the On/Off button until "slide to power off" appears. Slide to power off your device. When it is off, press the On/Off button to turn it back on.
    If you can't restart your device, reset it by pressing and holding the Sleep/Wake button and the Home button at the same time for a least ten seconds, until the Apple logo appears.
    Clean the screen with a soft, slightly damp, lint-free cloth.
    Avoid using the device while wearing gloves, with wet hands, or immediately after applying hand lotion.
    If you have a protective case, or if you are using a plastic sheet or film on the display, try removing them and testing the device without it.
    If the steps above don't resolve your issue, please schedule a service appointment with an Apple Retail Store for evaluation. If an Apple Retail store is not an option, contact Apple to find out your best service option or see theService FAQ for your product.
    Additional Information
    Tip: To isolate an issue related to a portion of the Multi-Touch display, follow these steps:
    Open the Maps application and double-tap each corner, then the center, to verify that it zooms in to each section.
    If a specific area is affected in another application, note the location and try to verify touch functionality for that location in the Maps application.
    On iPhone and iPod touch, you can also use Calculator:
    Open the calculator app to test all but the top row of the screen. Press each button on the calculator and verify activity.
    To test the area at the top of the screen, rotate the device to change to the scientific calculator and press the buttons in the left or right two rows.
    When speaking with a Mac Genius or Service Provider, you can use this information to assist with evaluation of your issue.
    Thanks for reaching out to Apple Support Communities.
    Cheers,
    Pedro.

  • HT4623 I can't get my camera to work, or my Photo Booth. Any sugestion

    I can't get my camera to work,or my Photo Booth.  Any sugestion

    Close all apps on your iPad and reset the device.
    To close an app, drag the app up from the multitasking display. Double tap the home button and you will see apps lined up going left to right across the screen. Swipe to get to the app that you want to close and then swipe "up" on the app preview thumbnail to close it.
    Reset the iPad by holding down on the sleep and home buttons at the same time for about 10-15 seconds until the Apple Logo appears - ignore the red slider if it appears on the screen - let go of the buttons. Let the iPad start up.

Maybe you are looking for