Yii 2 carousel images

I have images stored in a folder under the web directory in a folder called images. I have used the code below to use images under that folder but they aren’t displaying.


 <?php

  echo Carousel::widget([

      'items' => [

          

          ['content'=>  Html::img('@web/001.jpeg')],

          ['content'=>  Html::img('@web/images/slideshow/002.jpeg')],

          ['content'=>  Html::img('@web/images/slideshow/003.jpeg')],

          ['content'=>  Html::img('@web/images/slideshow/004.jpeg')],

          ['content' => Html::img('@web/images/slideshow/005.jpeg'),

            ],        

          ],

     ]);

  ?>

hi kmartin try this:




 <?php

  echo Carousel::widget([

      'items' => [

          

          ['content'=>  Html::img('001.jpeg')],

          ['content'=>  Html::img('images/slideshow/002.jpeg')],

          ['content'=>  Html::img('images/slideshow/003.jpeg')],

          ['content'=>  Html::img('images/slideshow/004.jpeg')],

          ['content' => Html::img('images/slideshow/005.jpeg'),

            ],        

          ],

 	]);

  ?>

for example if your @web aliases is the route [b]/home/user/html/yourproject/web

[/b]

your browser will try to find the image in the yourpage/home/user/html/yourproject/web/001.jpg

but your image is in[b] ‘yourpage / 001.jpg’

[/b] I think that’s your mistake, i hope it heps you

Thanks Bushy but that didnt help either. When i insert images on the view file like this


<?php echo Html::img('@web/images/4.jpg');?>

it is working fine. Is there a correct way of doing the same on the carousel widget?

hi, so i have this code in one project:


<?php

	echo Carousel::widget([

    	'items' => [

        	[

            	'content' => '<img src="files/1.JPG" />',

            	'caption' => '<h4>This is title</h4>',

        	],

        	[

            	'content' => '<img src="files/2.JPG" />',

            	'captions' => '<div> text </div>s',

        	],

        	[

            	'content' => '<img src="files/3.JPG" />',

            	'captions' => '<div> text </div>',

        	]

    	]

	]);

	?>

work fine, and apology, you’re right about the path of the image, It is that I had a similar mistake, and that was the problem.

in your browser console, see if you are getting images and make sure that the browser loads images

Hi Guys,

I didnt get the native yii2 carousel widget to work so i used the twitter bootstrap carousel on the view file like this


<div id="myCarousel" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->

      <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

      </ol>

      <div class="carousel-inner" role="listbox">

        <div class="item active">

            <img class="first-slide" src="images/slideshow/001.jpg" alt="First slide">

          <div class="container">

            <div class="carousel-caption">

                           

            </div>

          </div>

        </div>

        <div class="item">

          <img class="second-slide" src="images/slideshow/002.jpg" alt="Second slide">

          <div class="container">

            <div class="carousel-caption">

              

              

          </div>

        </div>

        <div class="item">

          <img class="third-slide" src="images/slideshow/003.jpg" alt="Third slide">

          <div class="container">

            <div class="carousel-caption">

                            

            </div>

          </div>

        </div>

      </div>

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

      </a>

      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

      </a>

    </div><!-- /.carousel -->

and on the css


/* Carousel base class */

.carousel {

  height: 500px;

  margin-bottom: 30px;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  z-index: 10;

}


/* Declare heights because of positioning of img element */

.carousel .item {

  height: 450px;

  background-color: #777;

}

.carousel-inner > .item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  height: 500px;

}

Hope it will help someone ::)

<?php

use yii\helpers\Html;

use yii\bootstrap\Carousel;

?>

<?php

echo Carousel::widget([

'items' =&gt; [


    [


        'content' =&gt; Html::img('@web/img/banner.png'),


        'caption' =&gt; '&lt;h4&gt;Artajasa Pembayaran Elektronis &lt;/h4&gt;',


    ],


    [


        'content' =&gt; Html::img('@web/img/banner.png'),


        'captions' =&gt; '&lt;div&gt; text &lt;/div&gt;s',


    ],


    [


        'content' =&gt; Html::img('@web/img/banner.png'),


        'captions' =&gt; '&lt;div&gt; text &lt;/div&gt;',


    ]


]

]);

?>

and you can put image in folder web\img\name of your image

for example im using yii2 advance and i put my image in yii2advance\frontend\web\img\name of your image

it should be worked