How do I get the images to form a slideshow with Coin Slider?
up vote
1
down vote
favorite
<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.
jquery plugins widget
add a comment |
up vote
1
down vote
favorite
<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.
jquery plugins widget
Can you check if theirs any error in console? also make sure you are add a css file for plugin.
– Anees Hikmat Abu Hmiad
Nov 10 at 11:43
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
<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.
jquery plugins widget
<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.
jquery plugins widget
jquery plugins widget
edited Nov 10 at 19:50
asked Nov 10 at 10:37
Xyce Bedet
266
266
Can you check if theirs any error in console? also make sure you are add a css file for plugin.
– Anees Hikmat Abu Hmiad
Nov 10 at 11:43
add a comment |
Can you check if theirs any error in console? also make sure you are add a css file for plugin.
– Anees Hikmat Abu Hmiad
Nov 10 at 11:43
Can you check if theirs any error in console? also make sure you are add a css file for plugin.
– Anees Hikmat Abu Hmiad
Nov 10 at 11:43
Can you check if theirs any error in console? also make sure you are add a css file for plugin.
– Anees Hikmat Abu Hmiad
Nov 10 at 11:43
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
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>
1
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, and matches yours. The relative paths of both of the images are correct, because they do show up in the <header> 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 1.4.2 of the jQuery library.
– Xyce Bedet
Nov 10 at 19:29
add a comment |
up vote
0
down vote
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!!! :)
Thanks for share info too :tup:
– Anees Hikmat Abu Hmiad
Nov 10 at 20:44
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
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>
1
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, and matches yours. The relative paths of both of the images are correct, because they do show up in the <header> 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 1.4.2 of the jQuery library.
– Xyce Bedet
Nov 10 at 19:29
add a comment |
up vote
1
down vote
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>
1
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, and matches yours. The relative paths of both of the images are correct, because they do show up in the <header> 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 1.4.2 of the jQuery library.
– Xyce Bedet
Nov 10 at 19:29
add a comment |
up vote
1
down vote
up vote
1
down vote
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>
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>
$(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>
$(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>
answered Nov 10 at 12:04
Anees Hikmat Abu Hmiad
1,155824
1,155824
1
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, and matches yours. The relative paths of both of the images are correct, because they do show up in the <header> 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 1.4.2 of the jQuery library.
– Xyce Bedet
Nov 10 at 19:29
add a comment |
1
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, and matches yours. The relative paths of both of the images are correct, because they do show up in the <header> 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 1.4.2 of the jQuery library.
– Xyce Bedet
Nov 10 at 19:29
1
1
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, and matches yours. The relative paths of both of the images are correct, because they do show up in the <header> 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 1.4.2 of the jQuery library.
– Xyce Bedet
Nov 10 at 19:29
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, and matches yours. The relative paths of both of the images are correct, because they do show up in the <header> 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 1.4.2 of the jQuery library.
– Xyce Bedet
Nov 10 at 19:29
add a comment |
up vote
0
down vote
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!!! :)
Thanks for share info too :tup:
– Anees Hikmat Abu Hmiad
Nov 10 at 20:44
add a comment |
up vote
0
down vote
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!!! :)
Thanks for share info too :tup:
– Anees Hikmat Abu Hmiad
Nov 10 at 20:44
add a comment |
up vote
0
down vote
up vote
0
down vote
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!!! :)
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!!! :)
edited Nov 10 at 20:34
answered Nov 10 at 20:00
Xyce Bedet
266
266
Thanks for share info too :tup:
– Anees Hikmat Abu Hmiad
Nov 10 at 20:44
add a comment |
Thanks for share info too :tup:
– Anees Hikmat Abu Hmiad
Nov 10 at 20:44
Thanks for share info too :tup:
– Anees Hikmat Abu Hmiad
Nov 10 at 20:44
Thanks for share info too :tup:
– Anees Hikmat Abu Hmiad
Nov 10 at 20:44
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238096%2fhow-do-i-get-the-images-to-form-a-slideshow-with-coin-slider%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Can you check if theirs any error in console? also make sure you are add a css file for plugin.
– Anees Hikmat Abu Hmiad
Nov 10 at 11:43