PhpTags/Widgets/Slick

From Test foxway
Jump to: navigation, search

This page demonstrates the PhpTags extension

Bucket in the sand.svg You can play it in the namespace sandbox (editing is allowed for anonymous users there)


Single Item

1

2

3

4

5

6

Source:
<phptag>
echo new Slick( 
        '<div><h3 style="background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;">1</h3></div>
        <div><h3 style="background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;">2</h3></div>
        <div><h3 style="background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;">3</h3></div>
        <div><h3 style="background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;">4</h3></div>
        <div><h3 style="background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;">5</h3></div>
        <div><h3 style="background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;">6</h3></div>',
        ['dots'=>true, 'infinite'=>true, 'speed'=>300, 'slidesToShow'=>1, 'slidesToScroll'=>1] 
    );
</phptag>

Multiple Items

1

2

3

4

5

6

7

8

9

Source:
<phptag>
$slides = [];
$n = 1;
while ( $n <= 9) {
	$slides[] = "<h3 style=\"background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;\">$n</h3>";
	$n++;
}
echo new Slick( $slides, ['dots'=>true, 'infinite'=>true, 'speed'=>300, 'slidesToShow'=>3, 'slidesToScroll'=>3, 'swipeToSlide'=>true] );
</phptag>

Variable Width

275

100

175

200

175

75

75

275

75

Source:
<phptag>
$slides = [];
$n = 1;
while ( $n <= 9) {
	$width = rand(1, 5) * 50 + rand(0, 1) * 25;
	$slides[] = "<h3 style=\"background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB; width:{$width}px;\">$width</h3>";
	$n++;
}
$s = new Slick( $slides );
$s->dots = true;
$s->infinite = true;
$s->SpEeD = 300;
$s->slidestoshow = 1;
$s->CENTERMode = '1';
$s->variableWidth = true;
echo $s;
</phptag>

Adaptive Height

1

3

  • one
  • two
  • three

4

I am wikitext
Source:
<phptag>
$slides = [];
$n = 1;
while ( $n <= 4) {
	$slides[] = "<h3 style=\"background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;\">$n</h3>";
	$n++;
}
$slides[1] .= "[[Main Page]]";
$slides[2] .= "\n* one\n*two\n*three";
$slides[3] .= "I am '''wikitext'''";
echo new Slick( $slides, ['DOTs'=>true, 'iNfInItE'=>1, 'spEEd'=>'300', 'slidestoshow'=>'1', 'adaptiveHeight'=>'ok' ] );
</phptag>

Autoplay

1

2

3

4

5

6

Source:
<phptag>
$slides = [];
$n = 1;
while ( $n <= 6) {
	$slides[] = "<h3 style=\"background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;\">$n</h3>";
	$n++;
}
echo new Slick( $slides, ['dots'=>true, 'infinite'=>true, 'speed'=>300, 'slidesToShow'=>3, 'slidesToScroll'=>1, 'autoplay'=>true, 'autoplaySpeed'=>2000] );
</phptag>

Slider Syncing

1

2

3

4

5

6

1

2

3

4

5

6

Source:
<phptag>
$slides = [];
$n = 1;
while ( $n <= 6) {
	$slides[] = "<h3 style=\"background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;\">$n</h3>";
	$n++;
}
$one = new Slick( $slides, ['slidesToShow'=>1, 'slidesToScroll'=>1, 'arrows'=>false, 'fade'=>true] );
$two = new Slick( $slides, ['dots'=>true, 'slidesToScroll'=>1, 'centerMode'=>true, 'focusOnSelect'=>true, 'asNavFor'=>$one] );

echo '<div style="background-color:#3498DB;"><center><div style="width:600px; padding:20px;">', $one, '</div></center></div>';
echo '<div style="background-color:#3498DB;"><center><div style="width:600px; padding:20px;">' . $two . '</div></center></div>';
</phptag>

Right to Left

1

2

3

4

5

6

Source:
<phptag>
$slides = [];
$n = 1;
while ( $n <= 6) {
	$slides[] = "<h3 style=\"background-color:#FFF; line-height: 100px; margin: 10px; font-size: 36px; color: #3498DB;\">$n</h3>";
	$n++;
}
echo new Slick( $slides, ['dots'=>true, 'infinite'=>true, 'speed'=>300, 'slidesToShow'=>1, 'slidesToScroll'=>1, 'rtl'=>true] );
</phptag>