This extension is a wrapper for the jQuery Background Image Switcher Plugin

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist raoul2000/yii2-bgswitcher-widget "*"

or add

"raoul2000/yii2-bgswitcher-widget": "*"

to the require section of your composer.json file.

Once the extension is installed, and assuming that our 3 images are stored in @webroot/images/background, simply use this code by :

<?php
	use raoul2000\widget\bgswitcher\BgSwitcher;
	
	BgSwitcher::widget([
		'selector' => '#targetId',
		'pluginOptions' => [
			'images' => [
				'images/background/image1.jpg',
				'images/background/image2.jpg',
				'images/background/image3.jpg',
				'http://placehold.it/350x150'   // this image is remote
			]
		]
	]);
?>

<div id="targetId" class="cover-bg" style="width:100%;height:250px;">
	<p>some text here ... </p>
</div>

Below is an example of a CSS style to apply to the target container :

.cover-bg {
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

For complete documentation please refer to the official BgSwitcher page. You may also have a look to the Github project page.

If this plugin did not convinced you, have a look to the Backstretch Plugin

yii2-bgswitcher-widget is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.