Jump to content

show my array of images on my js slider?


Recommended Posts

I made an image field name slider1 with max of 3 images. uploaded the 3 images for my slider to use on my slider in my homepage.

but how do i call it one by one? for ex.


ignore the code for my first item it doesnt work

but how do i make my slider work? have 3 images uploded on a single image field called slider1

how do i call each of them , what is the code to be put on img src for each item

Link to comment
Share on other sites

But I don't think you want to call them individually - what if you decide to add a 4th image at some point - then you'd need to change your code to add: ->eq(3).

Best bet is to do what kongondo suggested:

foreach($page->slider1 as $img){
    echo "<div class='item'><img src='{$img->url}' /></div>";
  • Like 1
Link to comment
Share on other sites

Bumped against exactly the same case,

What I learned from the forum:

Get an image by it´s name from the current page.

$image = $page->images->get("name=image.jpg");


Get an image by it's name from any page

$temp = $pages->get("/page_that_holds_picture/");

$image = $temp->images->get("name=image.jpg");

$image = $image->width(200);

echo "<img src='$image->url'/>";

Link to comment
Share on other sites

foreach ($page->slider1 as $slider) {
  echo "<div class='item'> <img src='$slider->url' alt='$slider->description'> </div>";

This assumes that you have an image description for each of your images that you will use as you image alt attribute.

Also assumes that you are pulling images from the current page's image field named 'slider1'

Also assumes that you will do your homework and read up on how to check if images exist/found on a page before attempting to output them.... :D

Apart from the 'alt', same as what Adrian posted above...

Link to comment
Share on other sites

As a clue, with a single image you can check whether a value exists, in other words whether there is an image in it. With an array, the loop wont run if there is no array, so that wont create an error, but it gets more complicated if there are other fields in the loop.

You can read all the grisly details about 3/4 of the way down this page of my long, beginners tutorial


That will probably cover most of your questions.

Link to comment
Share on other sites

Are you calling the owl slider?

You should have this on your page somewhere:

$(document).ready(function() {

It sounds like your loop is working fine, so this is not a PW problem but possible an issue with initialising the script and so on.

Again, check the console in chrome to see if it is showing any JS errors.

  • Like 1
Link to comment
Share on other sites

yup there is

  1. $(document).ready(function() {
  3. $("#owl-demo").owlCarousel();
  5. });

at the bottom of my code.

I think there is something wrong with my implementation of the loop?

can you see it? coz i really cant figure it out.

maybe something i miss with the quotes? its so hard

Link to comment
Share on other sites

Does that mean it is working now?

By the way, unless there is a reason for everything to be up at the head, I would move your scripts to just before your </body> tag with the exception of modernizr.

Also, is owl carousel.js included in responsee.js? Ow do you need to include it separately - I don't know responsee.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...