Giter Site home page Giter Site logo

Auto Transition about slidr HOT 14 CLOSED

bchanx avatar bchanx commented on June 6, 2024
Auto Transition

from slidr.

Comments (14)

bchanx avatar bchanx commented on June 6, 2024

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.

amilajack avatar amilajack commented on June 6, 2024

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.
2014-01-15 21_40_17-eculture

<!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.

amilajack avatar amilajack commented on June 6, 2024

**here is my html. I'm not sure what's wrong
2014-01-15 21_48_10-c__dishna_amila-slider_test html - sublime text 2 unregistered

from slidr.

bchanx avatar bchanx commented on June 6, 2024

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.

amilajack avatar amilajack commented on June 6, 2024

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!

test

from slidr.

bchanx avatar bchanx commented on June 6, 2024

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.

amilajack avatar amilajack commented on June 6, 2024

upload1
upload

from slidr.

amilajack avatar amilajack commented on June 6, 2024

Are any tags out of place?

from slidr.

bchanx avatar bchanx commented on June 6, 2024

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.

amilajack avatar amilajack commented on June 6, 2024

It works flawlessly! Thank you so much! How would I make the slider take up 100% of the width of the screen?

from slidr.

amilajack avatar amilajack commented on June 6, 2024

upload

from slidr.

bchanx avatar bchanx commented on June 6, 2024

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.

amilajack avatar amilajack commented on June 6, 2024

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!

2014-01-21 19_06_46-home logged in psd 50 now offering even more for your idevices rgb_8 _
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.

bchanx avatar bchanx commented on June 6, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.