Elastislide – A Responsive jQuery Carousel Plugin Installation help.

  • sandra408

    (@sandra408)


    12 years 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=”https://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)

  • Go to this link:

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

    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="https://vid2r.com/darlingblogs/wp-content/uploads/4517436-org.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="https://vid2r.com/darlingblogs/wp-content/uploads/shutterstock_67147738.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="https://vid2r.com/darlingblogs/wp-content/uploads/shutterstock_89875054.jpg" alt="image03" /></a></li>
    <li><a href="#"><img src="https://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)

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

    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)

    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.