CODEWITHSUNDEEP
jquerycaroufredsel
user2501504
user2501504

Reputation: 311

Pplugin carouFredSel no work me

This plugin if i use in a single page works the problem it´s when use for example into template as wordpress and with enqueve

In first moment i get works but only in firefox , after this i try works in other navigator and no works never , only works in firefox

When i get works i do this , i use shortcode for show this slider , with images , and use jquery core refence inside the shortcode and also the plugin src reference , in this way works , but if the code it´s in the head of wordpress no works , if use the code inside the shortcode , this stop all my scripts of wordpress and only works this plugin and if the reference code of jquery and reference this plugin go inside the head never works but yes all my plugins

Only have problem with this plugin and always give me the same problems , my code it´s this : 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.5.2'"></script>
<script src="container/themes/thefactoyweb/js/jquery.carouFredSel-6.2.1.js"></script>

<style>

#footxxx img
{
    width:280px;
    height:113px;   
}

</style>

    <div id="footxxx">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
        <img src="image1.png" class="image_car" height="113" width="280">
    </div>


<script>

    jQuery(document).ready(function() {

        jQuery("#footxxx").carouFredSel({
            items: 3,
            direction: "left",
            scroll:{
                items: 2,
             // width   : 280,
             // height  : 140,
                easing:"elastic",
                duration:1000,                          
                pauseOnHove:true
            }                   
        }); 
    });

</script>

By this i want know if exists some alternative to this plugin because it´s impossible works fine , when fix one problem show other and continue all time with more problems

Thank´s , Regards !

Upvotes: 1

Views: 771

Answers (1)

Ignacio Correia
Ignacio Correia

Reputation: 3668

few changes you need to.

Close images tags

<div id="footxxx">
<img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
<img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
<img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
<img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
<img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
<img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
<img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
</div>

Correct jquery call

$(document).ready(function() {
        $("#footxxx").carouFredSel({
            items: 3,
            direction: "left",
            scroll:{
                items: 2,
             // width   : 280,
             // height  : 140,
                easing:"elastic",
                duration:1000,                          
                pauseOnHove:true
            }                   
        }); 
    });

Correct CSS float

#footxxx img
 {
   width:280px;
   height:113px;   
   float:left;
}

Working demo

Upvotes: 1

Related Questions