JQuery Slider Help

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Ok so I'll be honest here, I'm a complete newbie at JQuery. I really have no idea what I'm doing at the moment.

I've downloaded this source code http://bxslider.com/ for a really neat image slider that I'd like on my index page of my site. I have followed the instructions the site has given. I have uploaded the files to my file manager, and inserted the two code snippets they provide. However, I'm not sure where to go from here.

I'd really appreciate someone who is experienced with JQuery and also has some time and patience to please help me out.

Stuff that might be important:
- I'm going to make about 4 or five slides, each 870px by 200px
- The files I uploaded to the manager are all in one folder named 'JQuery'

Thanks in advance for the help!
Brandon
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
  • unsure

Posted 8 years ago

  • 1
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Found it! Why they no longer include this in the download package, who knows...

https://github.com/wandoledzep/bxslid...
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
you legend... will try this out... :)
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Awesome. I'll try help out later if need be. Very busy at the moment. Good luck! :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Thanks Brandon. There will be many who will now be able to configure this so your work is and will be appreciated for a long, long time. Thank you.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Ok, good news! I've got it to work :)

The code: Just copy and paste this into an HTML widget. (Note, some CSS is only necessary for certain customizations, but just keep it there to be safe)


<head>

<style type="text/css">
.bx-next {
position:absolute;
top:40%;
right:-50px;
z-index:999;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(resources/gray_next.png) no-repeat 0 -30px;
}

/*previous button*/
.bx-prev {
position:absolute;
top:40%;
left:-50px;
z-index:999;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(resources/gray_prev.png) no-repeat 0 -30px;
}

/*pager links*/
.bx-pager a {
margin-right: 5px;
color: #fff;
padding: 3px 8px 3px 6px;
font-size: 12px;
zoom:1;
background: url(resources/gray_pager.png) no-repeat 0 -20px;
}

/*auto start button*/
.bx-auto .start {
background: url(resources/gray_auto.png) no-repeat 0 2px;
padding-left: 13px;
}

/*auto stop button*/
.bx-auto .stop {
background: url(resources/gray_auto.png) no-repeat 0 -14px;
padding-left: 13px;
}

/*next/prev button hover state*/
.bx-next:hover,
.bx-prev:hover {
background-position: 0 0;
}

/*pager links hover and active states*/
.bx-pager .pager-active,
.bx-pager a:hover {
background-position: 0 0;
}

/*pager wrapper*/
.bx-pager {
text-align:center;
padding-top: 7px;
font-size:12px;
color:#666;
}

/*captions*/
.bx-captions {
text-align:center;
font-size: 12px;
padding: 7px 0;
color: #666;
}

/*auto controls*/
.bx-auto {
text-align: center;
padding-top: 15px;
}

.bx-auto a {
color: #666;
font-size: 12px;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#slider1').bxSlider({
infiniteLoop: true,
auto: true,
hideControlOnEnd: false
});
});
</script>

</head>
<body>

<ul id="slider1">
<li><img src="URL OF IMAGE"/></li>
<li><img src="URL OF IMAGE"/></li>
<li><img src="URL OF IMAGE"/></li>
</ul>

</body>


Stuff you need to change:

- The URL of your images of course (And adding more lines to add more slides)
- The URL of the gray_next.png and gray_prev.png

And that's it! You can also tweak CSS to change width, height of slide etc. as well as the JQuery speed (As I believe the default is way too fast). You can take a look at a skeletal version on my website's Experiment Page :) Let me know if you need more help!

Kind regards,
Brandon
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Brandon,

A perfect illustration. Thanks again and a reference that's bookmarked
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Hi everyone, if you want to see bxslider in action go here: www.rofasia.com. No buttons/arrows but displays the main images beautifully. However to stop. If anyone needs the code, let me know.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Just Beautiful! Viewing your site and slide show makes me feel happy.
Coincidentally I'm working on one later today I think. Yours is classical beautiful objects the one I'll work on is more grunge so it will be good to see the effect with base objects :) Actually an authentic grunge style could work for Cambodian products Valerie?

I'll be ripping your code!
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Hi everyone, seems like something caused the BXslider to stop working - have logged problem here http://forum.yola.com/yola/topics/jqu..., if you experience the same problem, please report thanks
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Problem fixed by putting the entire code into the html widget itself. Thanks Brandon for the guidance! Klaus
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Klaus

I couldn't see any box sliding effect on rofasia.com. Can you please provide the URL? I'd like to check it out ;-).
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Hi Stefan, you can look at http://rofasia-test.yolasite.com/ or http://www.rofasia.com/holding-dump.php to see the bxslider in action. I had the code in the Site Tracking Code section previously which worked fine - but stopped working. I now moved all the code into the widget itself. Klaus
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Klaus

Thanks. Yeah, the slider on http://rofasia-test.yolasite.com/ is working on my end as well.

I have also looked at http://www.rofasia.com/holding-dump.php, and can confirm that it's working too. It took a while to load the page, however, so that the sliding effect wasn't neatly displayed first. Have you considered downsizing the pictures on that page?
Photo of Luke Sartain

Luke Sartain

  • 11 Posts
  • 0 Reply Likes
Hi guys, can someone view my site in chrome and tell me what is happening to my bxslider? http://www.bathrugbyfoundation.com/ it seems to work on explorer and also firefox.... thanks

luke