CODEWITHSUNDEEP
jquerypluginswidget
Xyce Bedet
Xyce Bedet

Reputation: 43

How do I get the images to form a slideshow with Coin Slider?

<link href="css/site.css" rel="stylesheet">
<link href="css/coin-slider.css" rel="stylesheet">
<style>

</style>
<script src="js/jquery.js"></script><script src="js/coin-slider.js" 
</script> 
<script src="js/site.js"></script><script src="js/modernizr.js"</script>
<script>
$(document).ready(function() {
 $('#coin-slider').coinslider();
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
 <header>
  <span class="search"><input class="input" type="text" 
  placeholder="Search here..." title="Search for content on this website 
  here."><input type="submit"></span>
 <img class="title" src="jaja.png">
 <div id="coin-slider" class="header">
  <img src="city.png">
  <img src="class.png">
 </div>
</header>

The above code is, of course, not all the markup. It's just the relevant portion. If any of you need more of the complete markup to sufficiently analyze this problem, I'll comply, for I simply cannot get this plugin to work, no matter what I do.

My mission is to get the images to be parts of a slideshow through the Coin Slider plugin!

Thanks!!! (:

UPDATE (11/10/2018, 2:46 PM EST) I've decided to show more code.

UPDATE (11/10/2018, 2:47 PM) It's weird. Using Google Chrome, I don't have any errors in the browser console. I am using both my external stylesheet and the Coin Slider stylesheet, which takes about 1 KB. The relative paths of both of the images are correct, because they do show up in the element, but they're both side by side. And I checked the filenames to make sure there are no typos, and nada. Also, I am using the minified version 3.3.1 of the jQuery library.

Upvotes: 1

Views: 65

Answers (2)

Xyce Bedet
Xyce Bedet

Reputation: 43

Figured it out!

The Modernizr library was conflicting with the plugin. Once I removed it, it started working.

Special thanks to Anees Hikmat Abu Hmiad for taking the time to reply to my post. You're awesome!!! :)

Upvotes: 0

Anees Hikmat Abu Hmiad
Anees Hikmat Abu Hmiad

Reputation: 3560

Possible Issue:

1) May You no include css, so that you need to include css style file for this plugin.

2) May you have a javascript error in your console, so that you need to fix it to let plugin work.

3) My you include none-exists image, or wrong image path.

so that you need to check these point...

you can check this example: fiddle 

$(document).ready(function() {
    $('#coin-slider').coinslider();
  });
/*
	Coin Slider jQuery plugin CSS styles
	http://workshop.rs/projects/coin-slider
*/


.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider.min.js"></script>

<div id='coin-slider'>
  <img src='http://2nees.com/parallex/sites/default/files/styles/courses_img_style/public/php_wallpaper_1.jpg'>
  <img src='http://2nees.com/parallex/sites/default/files/styles/courses_img_style/public/javascript.jpg?itok=nFYl-Tsl'>
</div>

Upvotes: 1

Related Questions