Comments (14)
Hi @amilajack,
You can invoke the auto() function in one of two ways. The first is calling it directly after create():
slidr.create('slidr-img', {
breadcrumbs: true,
controls: 'none'
}).auto(2000, 'left');
The second way is to save a reference to the Slidr object after calling start(), then running auto() on the saved instance:
var s = slidr.create('slidr-img', {
breadcrumbs: true,
controls: 'none'
}).start();
s.auto(2000, 'left');
Hope that helps! Let me know if you run into additional problems.
from slidr.
Here is my entire HTML. I'm not sure what's wrong and I'm really inexperienced with js and coding general. For some reason this is all I'm getting.
<!doctype html>
<title>ECULTURE</title> <script src="js/jquery.js"></script> <script src="js/jquerycycle.js"></script> <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> <script type="text/javascript"> $(document).ready(function() { slidr.create('slidr-img', { breadcrumbs: true, controls: 'none' }).auto(2000, 'left'); </script> <script type="text/javascript" src="js/slidr.min.js"></script>from slidr.
**here is my html. I'm not sure what's wrong
from slidr.
Hey @amilajack,
Seems like you're not closing your ready() function properly, which is causing slidr.create() to fail.
Give this a try: (I've also made it so the Slidr loops back to the original slide, for a better effect)
<script>
$(function() {
slidr.create('slidr-img', {
breadcrumbs: true,
controls: 'none'
}).add('h', ['one', 'two', 'three', 'one']).auto(2000, 'right');
});
</script>
from slidr.
I'm really sorry for all the hassle this is causing but I still can't get the slidr to work. Again I've never had experience with javascript but I really like this slider! Can you please see why it's not working? Thanks! I really appreciate your support!
from slidr.
Hey @amilajack,
It's not working because you have an extra <div class="slideshow">
element wrapping the slides. Slidr expects slides to be direct children of the parent Slidr element. Try this for your html:
<div id="slidr-img" style="display:inline-block">
<img data-slidr="one" src="foresthigh.jpg">
<img data-slidr="two" src="warehousehigh.jpg">
<img data-slidr="three" src="foresthigh.jpg">
</div>
Let me know how that goes!
from slidr.
from slidr.
Are any tags out of place?
from slidr.
Oh @amilajack, I think I know what the problem is.
You're trying to use jQuery's document onload (the part of the code that reads $(function() {})
) that's wrapping the slidr call, but you don't seem to have jQuery linked in your html. If you're planning to use jQuery you can download it here: http://jquery.com/download/, then add a <script type="text/javascript" src="/path/to/jquery.js"></script>
before the script block that's calling slidr.create()
.
If you don't plan on using jQuery, then you can still make slidr.js work. Cut and paste the first script block and place it after you load slidr.js. Something like this:
<body>
<div id="slidr-img" style="display:inline-block">
<img data-slidr="one" src="foresthigh.jpg">
<img data-slidr="two" src="warehousehigh.jpg">
<img data-slidr="three" src="foresthigh.jpg">
</div>
</body>
<script type="text/javascript src="slidr.js"></script>
<script>
slidr.create('slidr-img', {
breadcrumbs: true,
controls: 'none'
}).add('h', ['one', 'two', 'three', 'one']).auto(2000, 'right');
</script>
I think that should do it. Let me know if it's still not working!
from slidr.
It works flawlessly! Thank you so much! How would I make the slider take up 100% of the width of the screen?
from slidr.
from slidr.
Hi @amilajack,
You can either set the css width inline in your html (and probably use display: block if you're going to span the entire width of the page):
<div id="slidr-img" style="display: block; width: 100%">
Or, remove the inline css declaration so your html looks like <div id="slidr-img">
, and add this in your css:
#slidr-img {
display: block
width: 100%;
}
from slidr.
I would like to position fading text using the slider-ul feature and I'm trying to implement this over the slidr-img. I've tried multiple things so far and nothing seems to work.
The picture below is a mockup of how it should look like. The text and the image should transition at the same time and the pink banner should remain in the same place. How can I do this? Thanks so much for the help! I really appreciate it!
Here is the code that I'm using
http://jsfiddle.net/#&togetherjs=AenGae910a
Here is the google drive folder with the css and the image just in case if you want to work with it yourself a little bit.
https://drive.google.com/folderview?id=0B62q4hLyBtKbTUoxM0FrWFJldjQ&usp=drive_web
(It is under the directory CSS)
from slidr.
Hey @amilajack,
Hope you don't take this the wrong way, but it seems like questions about slidr.js have been answered. If you're looking for help on your project, you should try stackoverflow or ask fellow colleagues. If you have any more questions about the library itself though, feel free to ask. Otherwise, good luck with your site!
from slidr.
Related Issues (20)
- Delay HOT 3
- Next Prev in auto mode
- Creating Sub Categorie Slider
- Slide names in breadcrumbs... HOT 1
- External CSS
- next page/part of content
- Controls not work in opera 20
- Eternal Slider
- Responsive ? HOT 2
- [Slidr] Error adding [horizontal] slides for [testimonials-slider]. HOT 2
- endless loop HOT 2
- href for images HOT 3
- Disable vertical touch only on mobile
- clean/remove all the slidr
- Uncaught TypeError in Chrome
- Slide in random direction and specific timings per slide HOT 4
- How to make multiple slides ?! HOT 1
- Centering slide images vertically HOT 2
- Loop
- Add perView property
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slidr.