JQuery slider not working

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

44 Replies - 2842 Views - Last Post: 08 December 2014 - 08:37 AM

#1 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

JQuery slider not working

Posted 30 November 2014 - 11:53 AM

I have my photos working when I put them in my slider, but my thumbnails are not the correct size and my prev/next control shows up on one of my thumbnails (it correctly moves from one slide to another). Any help is much appreciated. I apologize, if some of my code may be incorrect, I am learning JQuery on my own.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
	<script src="http://htmldoc.net/examples/jquery.bxSlider.min.js" type="text/javascript"></script>
	<style type="text/css">
		.slideshow { width: 500px; height: 300px; margin: 15px; }
		.slideshow ul {list-style-type: none; margin: 0; padding: 0; }
		.slideshow li { width: 500px; height: 300px; margin: 0; }
		.bx-pager { width: 500px; height: 35px; margin: 3px 0 0 0; }
		.bx-pager a { display: block; float: left; width: 100px; height: 35px; line-height: 35px; font-size: 12px; color: #ffffff; text-align: center; background-color: #9C8878; }
		.bx-pager a.pager-active { background-color: #262E3B; }
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#slider').bxSlider({
				auto: false,
				pager: true,
				controls: true,
				buildPager: function(slideIndex){
					switch (slideIndex){
					case 0:
						return '<img src="images/thumbnails/pic1.png">';
					case 1:
						return '<img src="images/thumbnails/pic2.png">';
					case 2:
						
						return '<img src="images/thumbnails/pic3.png">';
					case 3:
						
						return '<img src="images/thumbnails/pic4.png">';
					
					}
				}
			});
		});	
	</script>
	
	<title>Test slideshow example</title>
</head>

<body>

	<div class="slideshow">
		<ul id="slider">
			<li><img src="images/pic1.png" /></li>
			<li><img src="images/pic2.png" /></li>
			<li><img src="images/pic3.png" /></li>
			<li><img src="images/pic4.png" /></li>
			
		</ul>
	</div>
<script type="text/javascript">



  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA-29333531-1']);

  _gaq.push(['_trackPageview']);



  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();



</script>



</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: JQuery slider not working

#2 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: JQuery slider not working

Posted 30 November 2014 - 06:15 PM

From the site for this plugin:

Quote

slideWidth
The width of each slide. This setting is required for all horizontal carousels!

Was This Post Helpful? 0
  • +
  • -

#3 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 01 December 2014 - 07:58 PM

I decided to change my code to the example in the bxslider website because it made more sense to me than what I did, but now my images are showing up as an "X." I've made sure that my images where in the images folder and my thumbnails in images/thumbs. :dontgetit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>BxSlider</title>
    <!-- jQuery library (served from Google) -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="images/thumbs/pic1.jpg">';
      case 1:
        return '<img src="images/thumbs/pic2.jpg">';
      case 2:
        return '<img src="images/thumbs/pic3.jpg">';
    }
  }
});

</script>
<script type="text/javascript">
var slider = $('.bxslider').bxSlider({
  mode: 'horizontal'
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="images/pic1.jpg"></li>');
  slider.reloadSlider();

</script>


<body>
<ul class="bxslider">
  <li><img src="images/pic1.jpg" /></li>
  <li><img src="images/pic2.jpg" /></li>
  <li><img src="images/pic3.jpg" /></li>
  <li><img src="images/pic4.jpg" /></li>
</ul>
</body>
</html>




Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: JQuery slider not working

Posted 01 December 2014 - 08:20 PM

Check the file extensions - you had .png originally and .jpg now
Was This Post Helpful? 0
  • +
  • -

#5 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 02 December 2014 - 04:20 PM

Now I see my images, but now they are not sliding. They are just all underneath each other.
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: JQuery slider not working

Posted 02 December 2014 - 04:23 PM

What errors are you getting from your console?
Was This Post Helpful? 0
  • +
  • -

#7 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 02 December 2014 - 04:46 PM

I figured out that I was missing $(document).ready(function(){ in my Javascript. I am not getting an errors, just a few warnings (such as I need my alt tags for my images) and type for my Javascript.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>BxSlider</title>
    <!-- jQuery library (served from Google) -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">

 $(document).ready(function(){

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="images/thumbs/pic1.png">';
      case 1:
        return '<img src="images/thumbs/pic2.png">';
      case 2:
        return '<img src="images/thumbs/pic3.png">';
    }
  }
});
});

</script>
<script type="text/javascript">
var slider = $('.bxslider').bxSlider({
  mode: 'horizontal'
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="images/pic1.png"></li>');
  slider.reloadSlider();

</script>


<body>
<ul class="bxslider">
  <li><img src="images/pic1.png" /></li>
  <li><img src="images/pic2.png" /></li>
  <li><img src="images/pic3.png" /></li>
  <li><img src="images/pic4.png" /></li>
</ul>
</body>
</html>





When I view it as I would a webpage, I see my prev/next (those work) but now I am also seeing like a link that says undefined.
Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: JQuery slider not working

Posted 02 December 2014 - 05:17 PM

A few suggestions would be to include your scripts at the end of your html just above the ending body tag so that it is loaded after the content is loaded. This will remove the need to use the $(document).ready() method.

Also I think it a good idea to use the html 5 doctype.
Was This Post Helpful? 0
  • +
  • -

#9 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: JQuery slider not working

Posted 02 December 2014 - 05:30 PM

You should still wrap them in a document.ready block so that your scripts are not render blocking.
Was This Post Helpful? 0
  • +
  • -

#10 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 02 December 2014 - 05:46 PM

Like so, with the html 5 doctype and the document.ready block?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BxSlider Test</title>

<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>

<div class="slider">

<style type="text/css">
  .bx-wrapper .bx-pager {
    bottom: -95px;
  }
  
  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }
  
  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }
  
  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>




<ul class="bxslider">
  <li><img src="images/pic1.png" /></li>
  <li><img src="images/pic2.png" /></li>
  <li><img src="images/pic3.png" /></li>
  <li><img src="images/pic4.png" /></li>
</ul>
</div>


<!-- jQuery library (served from Google) -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>


<script type="text/javascript">

 $(document).ready(function(){

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="images/thumbs/pic1.png">';
      case 1:
        return '<img src="images/thumbs/pic2.png">';
      case 2:
        return '<img src="images/thumbs/pic3.png">';
    }
  }
});
});

</script>

<script type="text/javascript">
var slider = $('.bxslider').bxSlider({
  mode: 'horizontal'
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="images/pic1.png"></li>');
  slider.reloadSlider();
  });

</script>


</body>
</html>




Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: JQuery slider not working

Posted 02 December 2014 - 09:12 PM

Your styles should be linked in the head of the document.
Was This Post Helpful? 0
  • +
  • -

#12 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 03 December 2014 - 10:28 AM

Got it. Now my images work, but my thumbnails show up as numbers.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BxSlider Test</title>

<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<style type="text/css">
  .bx-wrapper .bx-pager {
    bottom: -95px;
  }
  
  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }
  
  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }
  
  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>


</head>
<body>





<ul class="bxslider">
  <li><img src="images/pic1.png" /></li>
  <li><img src="images/pic2.png" /></li>
  <li><img src="images/pic3.png" /></li>
  <li><img src="images/pic4.png" /></li>
</ul>



<!-- jQuery library (served from Google) -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>


<script type="text/javascript">

 $(document).ready(function(){

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="images/thumbs/pic1.png">';
      case 1:
        return '<img src="images/thumbs/pic2.png">';
      case 2:
        return '<img src="images/thumbs/pic3.png">';
	 case 3:
        return '<img src="images/thumbs/pic4.png">';
    }
  }
});
});

</script>

<script type="text/javascript">
var slider = $('.bxslider').bxSlider({
  mode: 'fade',
  controls: true,
  auto: true,
  autoControls: true,
  adaptiveHeight: true,
  adaptiveHeightSpeed : 500,
  slideWidth : 500,
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="images/pic1.png"></li>');
  slider.reloadSlider();
  });

</script>


</body>
</html>









Was This Post Helpful? 0
  • +
  • -

#13 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 03 December 2014 - 10:59 AM

I think I got my thumbnails working, but I get a horizontal border around my pictures.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BxSlider Test</title>

<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<style type="text/css">
  .bx-wrapper .bx-pager {
    bottom: -95px;
  }
  
  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }
  
  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }
  
  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>


</head>
<body>


<ul class="bxslider">
  <li><img src="images/pic1.png" /></li>
  <li><img src="images/pic2.png" /></li>
  <li><img src="images/pic3.png" /></li>
  <li><img src="images/pic4.png" /></li>
</ul>



<!-- jQuery library (served from Google) -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>


<script type="text/javascript">

 $(document).ready(function(){

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="images/thumbs/pic1.png">';
      case 1:
        return '<img src="images/thumbs/pic2.png">';
      case 2:
        return '<img src="images/thumbs/pic3.png">';
	 case 3:
        return '<img src="images/thumbs/pic4.png">';
    }
  }
});
});

</script>

<script type="text/javascript">
var slider = $('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 4,
  slideMargin: 10
  mode: 'fade',
  controls: true,
  auto: true,
  autoControls: true,
  adaptiveHeight: true,
  adaptiveHeightSpeed : 500,
  slideWidth : 500,
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="images/pic1.png"></li>');
  slider.reloadSlider();
  });

</script>


</body>
</html>





Was This Post Helpful? 0
  • +
  • -

#14 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 03 December 2014 - 04:38 PM

I figured out what was wrong, I was missing a comma, but however my thumbnails still show 1,2,3,4. <_<

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BxSlider Test</title>

<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<style type="text/css">
  .bx-wrapper .bx-pager {
    bottom: -95px;
  }
  
  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }
  
  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }
  
  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>


</head>
<body>


<ul class="bxslider">
  <li><img src="images/pic1.png" /></li>
  <li><img src="images/pic2.png" /></li>
  <li><img src="images/pic3.png" /></li>
  <li><img src="images/pic4.png" /></li>
</ul>



<!-- jQuery library (served from Google) -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>


<script type="text/javascript">

 $(document).ready(function(){

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="images/thumbs/pic1.png">';
      case 1:
        return '<img src="images/thumbs/pic2.png">';
      case 2:
        return '<img src="images/thumbs/pic3.png">';
	 case 3:
        return '<img src="images/thumbs/pic4.png">';
    }
  }
});
});

</script>

<script type="text/javascript">
var slider = $('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 4,
  slideWidth : 500,
  auto: true,
  slideMargin: 10,
  mode: 'fade',
  controls: true,
  autoControls: true,
  adaptiveHeight: true,
  adaptiveHeightSpeed : 500,
  
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="images/pic1.png"></li>');
  slider.reloadSlider();
  });

</script>


</body>
</html>





Was This Post Helpful? 0
  • +
  • -

#15 swim_fan08   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 302
  • Joined: 19-February 09

Re: JQuery slider not working

Posted 03 December 2014 - 07:13 PM

I was able to get rid of the numbers that it was showing me, now I see the image, but the thumbnails are not showing up below the image. :unsure:



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BxSlider Test</title>

<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<style type="text/css">
  .bx-wrapper .bx-pager {
    bottom: -95px;
  }
  
  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }
  
  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }
  
  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>


</head>
<body>


<ul class="bxslider">
  <li><img src="images/pic1.png" /></li>
  <li><img src="images/pic2.png" /></li>
  <li><img src="images/pic3.png" /></li>
  <li><img src="images/pic4.png" /></li>
</ul>



<!-- jQuery library (served from Google) -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>


<script type="text/javascript">

 $(document).ready(function(){

$('.bxslider').bxSlider({
  
  buildPager: function(slideIndex){
    
     
    switch(slideIndex){
      case 0:
        return '<img src="images/thumbs/pic1.png">';
      case 1:
        return '<img src="images/thumbs/pic2.png">';
      case 2:
        return '<img src="images/thumbs/pic3.png">';
	 case 3:
        return '<img src="images/thumbs/pic4.png">';
    }
  }
});
});

</script>

<script type="text/javascript">
var slider = $('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 4,
  slideWidth : 500,
  auto: true,
  slideMargin: 10,
  mode: 'fade',
  controls: true,
  autoControls: true,
  adaptiveHeight: true,
  adaptiveHeightSpeed : 500,
  pagerCustom: '#bx-pager',
  
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="images/pic1.png"></li>');
  slider.reloadSlider();
  });

</script>


</body>
</html>





Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3