17 {{ upvoteCount | shortNum }}
17 {{ upvoteCount | shortNum }}

Jquery Carousel Issue

by jbearnolimits
14 replies
  • WEB DESIGN
    • |
I can't seem to figure out why this carousel isn't working. Could someone please take a look at it here: tests and tell me what is wrong with the code? I just can't make the images move or anything! I want to be able to have it move when the arrows are clicked and also have a small 12345 type of numbered list in it that you can click on to get the exact image you want.

I am trying to use the stuff from here to do all of this: Documentation - jCarousel

Maybe I didn't do something right?

The working example is here: http://sorgalla.com/jcarousel/examples/basic/
#carousel #issue #jquery
  • Profile picture of the author Anne Laidlaw
    Evrything looks fine the only thing I found different is the following line of code has a line break in it shoulnt make a difference but worth a try.

    current
    <script type="text/javascript"
    src="JQ/dist/jquery.jcarousel.min.js"></script>

    should be
    <script type="text/javascript" src="JQ/dist/jquery.jcarousel.min.js"></script>
    Signature
    Giant Plugin Biz High Quality WP Plugin Package
    WP Plugins Are Hott!! Claim Your Piece Of The Pie Today!
    Free Squeeze Page Creator - FREE Instant Access To Alou's Killer Squeeze Page Creator.
    Alou.com - Wordpress SEO - Latest free WordPress SEO, Plugins, Themes and more!
    {{ DiscussionBoard.errors[9370219].message }}
    • Profile picture of the author Michael71
      Originally Posted by Anne Laidlaw View Post

      Evrything looks fine the only thing I found different is the following line of code has a line break in it shoulnt make a difference but worth a try.

      current
      <script type="text/javascript"
      src="JQ/dist/jquery.jcarousel.min.js"></script>

      should be
      <script type="text/javascript" src="JQ/dist/jquery.jcarousel.min.js"></script>
      This does not matter, the file gets loaded as long as the src is inside the script tag.
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[9370233].message }}
  • Profile picture of the author Michael71
    Developer Tools of Google Chrome says:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://onthelineministries.com/jcarousel.basic.js

    Delete this line:

    Code:
    <script type="text/javascript" src="jcarousel.basic.js"></script>
    Before the </body> tag paste the following lines:

    Code:
    <script>
$(function() {
    $('.jcarousel').jcarousel();
});
</script>
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[9370226].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by Michael71 View Post

      Developer Tools of Google Chrome says:

      Failed to load resource: the server responded with a status of 404 (Not Found) http://onthelineministries.com/jcarousel.basic.js

      Delete this line:

      Code:
      <script type="text/javascript" src="jcarousel.basic.js"></script>
      Before the </body> tag paste the following lines:

      Code:
      <script>
$(function() {
    $('.jcarousel').jcarousel();
});
</script>
      Thanks, I'm getting closer. Take a look at it now though. Also the line I deleted may have helped if I had the path right. Should I put it back with the correct path?
      Signature
      http://onthelineministries.com
      {{ DiscussionBoard.errors[9370303].message }}
  • Profile picture of the author Michael71
    Let me check it...
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[9370315].message }}
  • Profile picture of the author Michael71
    Okay here is the complete working code.

    Use this code as SlideTest.html

    Code:
    <!doctype html>
<html lang="en">

<head>

      <title>tests</title>

<!-- Shared assets -->
        <link rel="stylesheet" type="text/css" href="_shared/css/style.css">  

<!-- Example assets -->


<script type="text/javascript" src="JQ/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="JQ/dist/jquery.jcarousel.min.js"></script>

 <!-- jquery basic carousel css -->
<style>
.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}


.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.jcarousel-wrapper .photo-credits a {
    color: #fff;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 400px;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 200px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.jcarousel-control-prev {
    left: -50px;
}

.jcarousel-control-next {
    right: -50px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: 0;
    left: 15px;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}

</style>
    
</head>

<body>

<div class="wrapper">
            <h1>Basic carousel</h1>

            <p>This example shows how to setup a basic carousel with prev/next controls and pagination.</p>

            <div class="jcarousel-wrapper">
                <div class="jcarousel">
                    <ul>
                        <li><img src="JQ/examples/_shared/img/img1.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img2.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img3.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img4.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img5.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img6.jpg" width="600" height="400" alt=""></li>
                    </ul>

                </div>

                <p class="photo-credits">
                    Photos by <a href="http://www.mw-fotografie.de/">Marc Wiegelmann</a>
                </p>

                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
                              
                <p class="jcarousel-pagination">
                    
                </p>
            </div>
        </div>
<!-- jquery basic carousel code -->
<script>
(function($) {
    $(function() {
        $('.jcarousel').jcarousel();

        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination();
    });
})(jQuery);

</script>
</body>

</html>
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[9370343].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by Michael71 View Post

      Okay here is the complete working code.

      Use this code as SlideTest.html

      Code:
      <!doctype html>
<html lang="en">
 
<head>
 
      <title>tests</title>
 
<!-- Shared assets -->
        <link rel="stylesheet" type="text/css" href="_shared/css/style.css">  
 
<!-- Example assets -->
 
 
<script type="text/javascript" src="JQ/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="JQ/dist/jquery.jcarousel.min.js"></script>
 
 <!-- jquery basic carousel css -->
<style>
.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
 
 
.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}
 
.jcarousel-wrapper .photo-credits a {
    color: #fff;
}
 
/** Carousel **/
 
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 400px;
}
 
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.jcarousel li {
    float: left;
}
 
/** Carousel Controls **/
 
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 200px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
 
.jcarousel-control-prev {
    left: -50px;
}
 
.jcarousel-control-next {
    right: -50px;
}
 
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
 
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
 
/** Carousel Pagination **/
 
.jcarousel-pagination {
    position: absolute;
    bottom: 0;
    left: 15px;
}
 
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
 
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
 
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
 
    margin-right: 2px;
 
    opacity: .75;
}
 
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
 
</style>
 
</head>
 
<body>
 
<div class="wrapper">
            <h1>Basic carousel</h1>
 
            <p>This example shows how to setup a basic carousel with prev/next controls and pagination.</p>
 
            <div class="jcarousel-wrapper">
                <div class="jcarousel">
                    <ul>
                        <li><img src="JQ/examples/_shared/img/img1.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img2.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img3.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img4.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img5.jpg" width="600" height="400" alt=""></li>
                        <li><img src="JQ/examples/_shared/img/img6.jpg" width="600" height="400" alt=""></li>
                    </ul>
 
                </div>
 
                <p class="photo-credits">
                    Photos by <a href="http://www.mw-fotografie.de/">Marc Wiegelmann</a>
                </p>
 
                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
 
                <p class="jcarousel-pagination">
 
                </p>
            </div>
        </div>
<!-- jquery basic carousel code -->
<script>
(function($) {
    $(function() {
        $('.jcarousel').jcarousel();
 
        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });
 
        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });
 
        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination();
    });
})(jQuery);
 
</script>
</body>
 
</html>
      I'm not sure yet how you got it working so I will have to take a close look and compare. But I have SlideTest.html that didn't work and uploaded SlideTest2.html with your code and it works.

      If you don't mind could you explain what happened?

      Oh and I was actually thinking that I would ask you if there was a way to quickly get in touch with you at any time to have you look at some codes and things like this? I hope to work for a company maintaining their website and it would be nice to have help when I need it. I would of course pay for such a service if I do get that job. What do you think?
      Signature
      http://onthelineministries.com
      {{ DiscussionBoard.errors[9370373].message }}
      • Profile picture of the author Michael71
        Originally Posted by jbearnolimits View Post

        I'm not sure yet how you got it working so I will have to take a close look and compare. But I have SlideTest.html that didn't work and uploaded SlideTest2.html with your code and it works.

        If you don't mind could you explain what happened?

        Oh and I was actually thinking that I would ask you if there was a way to quickly get in touch with you at any time to have you look at some codes and things like this? I hope to work for a company maintaining their website and it would be nice to have help when I need it. I would of course pay for such a service if I do get that job. What do you think?
        See my signature, there is my Skype name.
        Signature

        HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
        ---
        Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

        {{ DiscussionBoard.errors[9370439].message }}
  • Profile picture of the author jbearnolimits
    It looks like you just added the css in the html code itself and then added the functions at the end. I don't know why I didn't think of that. I am curious as to why the links to the css and the java script at the top didn't do it themselves though?
    Signature
    http://onthelineministries.com
    {{ DiscussionBoard.errors[9370379].message }}
  • Profile picture of the author jbearnolimits
    One more question. I have made some progress on SlideTest3.html in getting it to scroll on its own. I would like to know if you could tell me what I need in order to make it loop? Also is there a way to make the arrow navigation buttons hover over the images?
    Signature
    http://onthelineministries.com
    {{ DiscussionBoard.errors[9370410].message }}
  • Profile picture of the author Michael71
    The link to the css is only for the site styling, not for the carousel.

    The javascript you loaded is the plugin only that needs to be initialized, depending on how and what you want to use.

    In the style section, change the following code:

    Code:
    .jcarousel-control-prev {
    left: -50px;
}

.jcarousel-control-next {
    right: -50px;
}
    to this:

    Code:
    .jcarousel-control-prev {
    left: 0;
}

.jcarousel-control-next {
    right: 0;
}
    Loop: Configuration - jCarousel

    Maybe a small donation?

    click -> http://w3cvalidco.de/_labs_/paypal-donate/
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[9370429].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by Michael71 View Post

      The link to the css is only for the site styling, not for the carousel.

      The javascript you loaded is the plugin only that needs to be initialized, depending on how and what you want to use.

      In the style section, change the following code:

      Code:
      .jcarousel-control-prev {
    left: -50px;
}
 
.jcarousel-control-next {
    right: -50px;
}
      to this:

      Code:
      .jcarousel-control-prev {
    left: 0;
}
 
.jcarousel-control-next {
    right: 0;
}
      Loop: Configuration - jCarousel

      Maybe a small donation?

      click -> Donate Some Cash
      You have been a big help. I will be remembering you and what you have done here. I wish I could give a donation at this moment but right now I am without income (hence my hope for this new job). But when I get a chance I will send a little $respect$ your way.
      Signature
      http://onthelineministries.com
      {{ DiscussionBoard.errors[9370490].message }}

Trending Topics