Elastislide – A Responsive jQuery Carousel Plugin Installation help.

  • sandra408

    (@sandra408)


    13 years, 4 months ago

    Hello does anyone have experience with installing Elastislide – a Responsive jQuery Carousel Plugin into Twenty Ten based theme? I am new to WordPress and it does not seem to work in my theme based on Twenty Ten.

    Elastislide did not get installed with the Plugins-Add New feature.
    Then I just added this code from index.html (Elastislide index page) into my theme header.php

    <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
	<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
	<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
	<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
		<script src="js/modernizr.custom.17475.js"></script>

I put this part into my_galleries_page.php

    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;
    <script type=”text/javascript” src=”js/jquerypp.custom.js”></script>
    <script type=”text/javascript” src=”js/jquery.elastislide.js”></script>
    <script type=”text/javascript”>

    $( ‘#carousel’ ).elastislide();

    </script>

    Added appropriate folders into my theme folder and then put my slider gallery page with unordered items list (html code from Elastislide index.html page) in my_galleries_page.php from administrative panel.

    <ul id="carousel" class="elastislide-list">

<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03"

    …

    Still the gallery does not work. Can anyone help?
    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • connectore@yahoo.com

    (@connectoreyahoocom)

    13 years, 2 months ago

    Go to this link:

    http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

    marianney

    (@marianney)

    13 years ago

    Hello, I am not very good at jQuery and I am having much trouble setting up this plugin. I installed the Elastic Slide plugin by Nikos M. and can’t figure out how to get it on my home page. I put in this code on my home.php:

    <ul id="carousel" class="elastislide-list">
    <li><a href="#"><img src="http://vid2r.com/darlingblogs/wp-content/uploads/4517436-org.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="http://vid2r.com/darlingblogs/wp-content/uploads/shutterstock_67147738.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="http://vid2r.com/darlingblogs/wp-content/uploads/shutterstock_89875054.jpg" alt="image03" /></a></li>
    <li><a href="#"><img src="http://vid2r.com/darlingblogs/wp-content/uploads/raccoon.jpg" alt="image03" /></a></li>
</ul>

<script type="text/javascript">
jQuery(document).ready(function($){ // START

	$('#carousel').elastislide(14,16,21);  

}); // END
</script>

    But all I get is the images all stacked together. How do I add the sliding functionality? What am I missing?

    By the way, the link to the “tutorial” above does not help. It’s written for people who understand jQuery well, which I don’t. It’s missing some key steps and I don’t know what they are. Please help! I’m sure it must be something simple?

    Thread Starter sandra408

    (@sandra408)

    13 years ago

    Try this Carousel WordPress plugin instead.
    It actually allows you to easily configure your slider from your admin. panel.

    marianney

    (@marianney)

    13 years ago

    Hi, thanks for the suggestion but unfortunately that slider (like many others) does not have what i am looking for. I’d like one that shows 3 post images at the same time instead of just one and the Elastislide seems like the only one that does this.

    Thread Starter sandra408

    (@sandra408)

    13 years ago

    if you check the preview (see the bottom of the page) you’ll see that is is a slider (2 options: HTML content or thumbnails). And it gives you an option to adjust number of the visible items, so you can set it to 3 or whatever…

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Elastislide – A Responsive jQuery Carousel Plugin Installation help.’ is closed to new replies.