CODEWITHSUNDEEP
jqueryhtmlcssslideshow
TNK
TNK

Reputation: 4323

How I make like this slideshow using jquery?

I am trying to make a slideshow for my home page. What I need a slideshow is exactly same to this one http://www.flashmint.com/template-demo-4188.html.

This is my JavaScript - 

$(document).ready(function() {
  $('#banner').oneByOne({
    className: 'oneByOne1',
    easeType: 'random',
    slideShow: true
  });
});

This is JS FIDDLE

My problem is jquery easing effect not working in this slide show. Can anybody help me to figure this out?

Thank you.

Upvotes: 0

Views: 2228

Answers (2)

cavaliercyber
cavaliercyber

Reputation: 234

You can see this link http://3.s3.envato.com/files/41177958/index.html and view source code. After that try to check in your html that is has something different from source code of that link. Maybe you have forget to include some javascript or css that important for this library.

JS and CSS that I mean

<script src="js/jquery.1.8.2.min.js"></script>
<script src="js/jquery.onebyone.min.js"></script>              
<script src="js/jquery.touchwipe.min.js"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function() { 

    $('#banner').oneByOne({
        className: 'oneByOne1',              
        easeType: 'random',
        slideShow: true
    });  


 });


</script> 
<link href="css/jquery.onebyone.css" rel="stylesheet" type="text/css">
<link href="css/example1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/animate.css">

Upvotes: 1

Madan Ram
Madan Ram

Reputation: 876

use this JavaScript https://github.com/madan-ram/facebook-app/blob/master/js/jslider.js and then to embed in your html code 

<script type="text/javascript">
$(document).ready(function()//$(target).(some function execution or tasks)
{
$(".slider").jslider( //$(target).(some function execution or tasks)
{
btnPrev:".next",
btnNext:".prv",
});
});
</script>

then in body

<!--start 

slider--------------------------------------------------------------------------------------------->
<div id="slide_container">
<img src="./image/prev.png" class="prv"/>
<img src="./image/next.png" class="next"/>
<div class="slider">
<ul>
<li><a href="http://www.linux.com" ><img src="./image/linux-hardware.jpg" /></a></li>
<li><a href="http://www.wordpress.com" ><img src="./image/wordpress.jpg" /></a></li>
<li><a href="http://www.ubuntu.com" ><img src="./image/ubuntu.jpg" /></a></li>
<li><a href="http://www.firefox.com" ><img src="./image/firefox-thunderbird.jpg" /></a></li>
<li><a href="https://developers.google.com/" ><img src="./image/google.jpg" /></a></li>
<li><a href="http://www.gnu.org"><img src="./image/GnuTuxSoftRevolution-v1.jpg" style="width:580;height:400;"/></a></li>
</ul>
</div>
</div>
<!--end slider------------------------------------------------------------------------------------------------->

to see my code complete code of my app https://github.com/madan-ram/facebook-app/blob/master/index.php.

Upvotes: 1

Related Questions