jcobb / basic-jquery-slider Goto Github PK
View Code? Open in Web Editor NEWSimple to use, simple to theme, simple to customise.
Home Page: basic-slider.com
Simple to use, simple to theme, simple to customise.
Home Page: basic-slider.com
Oops!
I have a newbie question: I'm trying to place the slider into a specific area on a page but the "container" is wrapping the entire page rather than wrapping just the slider. Everything else is working fine but I can't figure out how to "move" the container to where I need it. Looks like the object is being generated by the script and i'm not sure how to change it or if that's the correct approach at all
http://taur.in/clients/itsmymeal/
the 2 slides at the bottom:
On IE8, the pagination markers don't move on.
the slides fade properly to the next one.
Unless i hover over the active marker, it doesn't move on.
Tested on ietester 4.11
Great plugin; very lightweight and flexible.
Would it be possible to add an option to hide the "previous" button if you're on the first slide and to hide the "next" button on the last one when the "showControls" option is set to true? Also, it would be nice to be able to position the controls independent of the banner containing div.
Cheers,
Matt
Currently slider continues when video is playing and mouse is not over slider.
Line 131 in slidey-plugin.js
$.each(banners,function(key,value){
key++
if(settings.animType == 'slide'){
if(key != 1 && key != banners.length)
$('<li><a href="#">'+key+'</a></li>').appendTo($marker_wrapper);
}
else{
$('<li><a href="#">'+key+'</a></li>').appendTo($marker_wrapper);
}
});
The key value that is added to the link is higher then the actually slide being viewed.
eg.
If i want to add the key to be the class of the
No big issue, but just thought I would point it out. :D
AWESOME WORK and may this be the beginning of DA SLIDER!!
If I change the animation to "slide" instead of "fade", the slider doesn't work at all. It's stuck at the clone of the last element placed at the very first of all the slides. Here is the code - http://jsbin.com/igunof
Hi- I have slider running here:
http://wavecrest.fastpencil.com/
How to I change the controls to the bottom and add the breadcrum style blocks showing what slide you're on?
Thanks
I am using following dropdown and it appears behind the slideshow:
http://www.basewebmaster.com/css/simple-css-drop-down-menu.php
How can I ensure that it goes over the slideshow?
Thanks
Is there a simple way to allow for header tags? I'd like to add titles in my captions, but since it's pulling from the title tag, it's not currently possible.
Problem when slides are populated dynamically and there is only 1 slide.
Is it possible to run 2 sliders in the same document? I've got 2 div's with different sizes, (#slideshow-1, #slideshow-2), and have got the script for both of them, but it seems to mix them up. Is it possible to run 2 at the same time?
EDIT: The hacky solution I've done now, is to make a copy of both the script and the css, and replace "bjqs" with "bjqs2". It works, but it's not great as it needs to load those files twice.
hi,
I am looking to replace the next/previous text buttoms with an image. Any informtation would be greatly appreciated.
Many thanks,
Ben
If there is an html5 video tag sitting in one of the li tags, and you click either the prev or next button, any suggestions on how to pause the video?
Hello
Is this possible to tell to the slide going up to down direction instead of left to right ?
Thank's
Hi,
First of all, great plugin. Very nice implementation.
It would be nice if you could expose the bjqsGo function to the outside world, so pages can be changed programmatically from outside the plugin.
I know that I can do this myself (and I did), but I thought that maybe it would be a nice feature request since IMHO it will make the plugin usable for many more people.
Thanks,
Ofir
Is there a way to make the slider pages change when clicking on a text link or thumbnail image (preferably both)? Similar to the way in which the different markers bring up the different pages currently.
More sensible just having classless UL
Is there a way to get my navigation menu drop down to appear above the slideshow? Right now it is behind. I tried using z-index in the CSS code.
Thank you!
I tried to change the
animationDuration: 450,
to
animationDuration: 2000,
but there is no effect for the fade-Effect
how can i expand the fade-Effect?
I downloaded your demo page and have tried to use the js in my projects (everything works great) but there is a "jitter" in Chrome in the slide animation. This happens in your demo and in my implementations of your plugin. Just before the slide begins to slide left it jumps right about 20-40px or so. This does not occur in Firefox for some reason. Any thoughts? Have you noticed this?
Prevent keypress events from propagating to the window when using keyboard navigation
Right now it's not possible to pass a % as a value for "width". Would be great to include this, for responsive designs. A problem with it is that there's no way to ensure consistency, any ideas how to fix this?
Is it possible to make a row of thumbnails with the left and right markers on the ends?
Similar to this sample
http://www.barnesandnoble.com/u/mystery-nook-books-ebooks/379003084
Hi, I want to add an html page inside the slider instead of an image. whats the code to put inside the
?Nice plugin John. Would be good for newcomers if you had some simple setup instructions in the readme (github parses markdown so it can look quite nice). For example: https://github.com/sferik/rails_admin
Hi John,
I think I may have found a small bug. I am dealing with a slider that will start with one image, but has the potential to have many more. When starting with the one image, I have the initialization code set as such:
$('#hdft-header').bjqs({
animation: 'slide',
showControls: false,
showMarkers: false,
useCaptions: false,
width: 940,
height: 400
});
It displays as it should. However, if you mouse-over the image, the pause countdown starts and the slider will move. I found a workaround by adding hoverPause: false to the initialization string. Unfortunately, I didn't want to leave it this way once the site is released to the client. After looking over the code, I found if you change Line 213 from "if (settings.hoverPause && settings.automatic) {" to "if (settings.hoverPause && settings.automatic && slideCount > 1) {" it corrected the issue.
Cheers,
Matt
Hi, i have try this in local and works 100%
But now i have add it to cmsms and i have this error`?
TypeError: 'undefined' is not a function (evaluating '$('#banner').slidey')
do you know what is the issue?
I have the slider in a loop, and just the first instance of it is working.
any IDEA??
If you have elements inside some of the slides which can receive focus, and a user is using the tab key to navigate through links of a page, when they come to any links inside the slider, the positioning / order of the slides gets messed up.
See here:
http://jsfiddle.net/B9nVy/9/
If you set focus in the result area and use the tab key to navigate through, you'll see that in the slider the browser jumps form link to link, but the position of the slide is incorrect.
What I'd like to see is, when you set focus on an element inside a slide that is not currently visible, that slide is automatically transitioned to.
The current selector won't find an imagecaption of nested images because of the used .children()-method.
Line 202 should be changed from:
var $slideChild = $slide.children('img:first-child');
to
var $slideChild = $slide.find('img').first();
He! Love the script, guys. Thank you so much.
Question: How do I float an element that sits within the slider
For example, here is my code:
<!-- start Jquery Slider -->
<ul class="bjqs">
<li class="slide1"><img src="image1.png" width="476" height="457" alt="Image 1"></li>
<li class="slide2"><img src="image1.png" width="476" height="457" alt="Image 2"></li>
</ul>
<!-- end jQuery Slider -->
I want the image in each slide to float above and slightly outside of each slide at this style:
.bjqs li img {
position: absolute;
z-index: 5;
right: -30px;
bottom: -30px;
width: 476px;
height: 457px;
}
Unfortunately, however, by setting a width and height in the javascript for this slider, the image gets cut off. Any way around that? Thanks!
Either needs to be set in the default css or added inline by the plugin.
Hi there,
I'm trying to put several sliders on a page. Text div on the left and image slider on the right. I changed the name of the second slider to banner2, but my divs are still looking misaligned, as are the markers, so I feel like I'm missing some kind of a differentiation, other than the name of the banner. Any suggestions?
Are throwing errors and the picture is not rendering in the slider. A little help please :)
http://preview.tinyurl.com/cwj9clt
Hey.
First of all great plugin. The only problem I having is that every time it slides, there is a right margin error.
For example: for slide two you can see 1 px of slide one and on slide three you can see 2 pixel of slide 2 and it goes on.
For better understanding check out live demo at www.queenofcondo.ca
Maybe I did something wrong. My
Please Guide.
Thanks
John, thanks for this great slider - just what I wanted to put some fade in / out text on a website.
I have set showMarkers to 'false' - but they won't go away! I can hide them using CSS, but wonder if it's something I'm doing or if there is a genuine "issue".
Thanks in advance for your time and efforts on this project.
(grateful) Juliet
List content within each ul.slide li ends up with display:none attribute applied to them. Slidey needs some other sort of way selecting the list and list items or the css needs adjusted to only select the first ul/li and not any child lists.
ul.bjqs needs position relative, without this css settings, the slider don't work. It would be great to include this in plugin.
With the eye on responsive webdesign (pages rearranging based on screen size using media queries) it would be great if the height and width could be set in a CSS file.
Great idea and starting point for your script. But with a quick browse I found multiple basic errors. Please run your file through something like JsLint in order to resolve these.
Thanks.
Currently breaks because markers are not defined when only 1 slide.
in the js when adding
Have not had time to test what's breaking right now! but using jQuery 1.7 with the latest 1.1 of basic-jquery-slider and the content vanishes as well as the controls.
Will update as soon as I have time to test.
Line 53
should be changed to $slider = $container.find('.bjqs'),
to avoid problems when calling the plugin asynchronously.
Otherwise, great plugin! Thanks.
Error thrown when animation function looks for markers and they have not been created, need to wrap in an if statement to check for settings.showMarkers
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.