Serious Slider - Version 1.0.3

Version Description

  • Fixed slider indicators being left aligned in Webkit browsers
  • Tweaked and re-checked all slider styles
Download this release

Release Info

Developer Cryout Creations
Plugin Icon 128x128 Serious Slider
Version 1.0.3
Comparing to
See all releases

Code changes from version 1.0.2 to 1.0.3

Files changed (5) hide show
  1. cryout-serious-slider.php +2 -2
  2. inc/shortcodes.php +10 -8
  3. readme.txt +5 -1
  4. resources/slider.js +1 -1
  5. resources/style.css +48 -32
cryout-serious-slider.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Cryout Serious Slider
4
  Plugin URI: http://www.cryoutcreations.eu/serious-slider
5
  Description: A highly efficient SEO friendly fully translatable accessibility ready free image slider for WordPress. Seriously!
6
- Version: 1.0.2
7
  Author: Cryout Creations
8
  Author URI: http://www.cryoutcreations.eu
9
  Text Domain: cryout-serious-slider
@@ -16,7 +16,7 @@ if ( !defined( 'ABSPATH' ) ) exit;
16
 
17
  class Cryout_Serious_Slider {
18
 
19
- public $version = "1.0.2";
20
  public $options = array();
21
  public $shortcode_tag = 'serious-slider';
22
  public $mce_tag = 'serious_slider';
3
  Plugin Name: Cryout Serious Slider
4
  Plugin URI: http://www.cryoutcreations.eu/serious-slider
5
  Description: A highly efficient SEO friendly fully translatable accessibility ready free image slider for WordPress. Seriously!
6
+ Version: 1.0.3
7
  Author: Cryout Creations
8
  Author URI: http://www.cryoutcreations.eu
9
  Text Domain: cryout-serious-slider
16
 
17
  class Cryout_Serious_Slider {
18
 
19
+ public $version = "1.0.3";
20
  public $options = array();
21
  public $shortcode_tag = 'serious-slider';
22
  public $mce_tag = 'serious_slider';
inc/shortcodes.php CHANGED
@@ -60,10 +60,10 @@ class Cryout_Serious_Slider_Shortcode {
60
  extract($options);
61
 
62
  if (!empty($attr['count'])) $count = esc_attr($attr['count']); else $count = -1;
63
-
64
  $hidecaption = !empty($attr['hidecaption']);
65
  $hidetitle = !empty($attr['hidetitle']);
66
-
67
  if ($sort == 'order'):
68
  // sort by order param
69
  $orderby = 'menu_order';
@@ -73,7 +73,7 @@ class Cryout_Serious_Slider_Shortcode {
73
  $orderby = 'date';
74
  $order = 'DESC';
75
  endif;
76
-
77
  if (!empty($attr['orderby'])) $orderby = esc_attr($attr['orderby']);
78
 
79
  $slider_classes = array();
@@ -304,11 +304,13 @@ class Cryout_Serious_Slider_Shortcode {
304
  <?php endwhile; ?>
305
  </div>
306
 
307
- <ol class="seriousslider-indicators">
308
- <?php for ($i=0;$i<$counter;$i++) { ?>
309
- <li data-target="#serious-slider-<?php echo $cid ?>" data-slide-to="<?php echo $i?>" <?php if ($i==0) echo 'class="active"' ?>></li>
310
- <?php } ?>
311
- </ol>
 
 
312
 
313
  <button class="left seriousslider-control" data-target="#serious-slider-<?php echo $cid ?>" role="button" data-slide="prev">
314
  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
60
  extract($options);
61
 
62
  if (!empty($attr['count'])) $count = esc_attr($attr['count']); else $count = -1;
63
+
64
  $hidecaption = !empty($attr['hidecaption']);
65
  $hidetitle = !empty($attr['hidetitle']);
66
+
67
  if ($sort == 'order'):
68
  // sort by order param
69
  $orderby = 'menu_order';
73
  $orderby = 'date';
74
  $order = 'DESC';
75
  endif;
76
+
77
  if (!empty($attr['orderby'])) $orderby = esc_attr($attr['orderby']);
78
 
79
  $slider_classes = array();
304
  <?php endwhile; ?>
305
  </div>
306
 
307
+ <div class="seriousslider-indicators">
308
+ <ol class="seriousslider-indicators-inside">
309
+ <?php for ($i=0;$i<$counter;$i++) { ?>
310
+ <li data-target="#serious-slider-<?php echo $cid ?>" data-slide-to="<?php echo $i?>" <?php if ($i==0) echo 'class="active"' ?>></li>
311
+ <?php } ?>
312
+ </ol>
313
+ </div>
314
 
315
  <button class="left seriousslider-control" data-target="#serious-slider-<?php echo $cid ?>" role="button" data-slide="prev">
316
  <span class="sicon-prev control-arrow" aria-hidden="true"></span>
readme.txt CHANGED
@@ -7,7 +7,7 @@ Tags: slider, slideshow, image slider, responsive slider, wordpress slider
7
  Text Domain: cryout-serious-slider
8
  Requires at least: 4.0
9
  Tested up to: 4.9
10
- Stable tag: 1.0.2
11
 
12
  Serious Slider is a highly efficient SEO friendly fully translatable accessibility ready free image slider for WordPress. Seriously!
13
 
@@ -105,6 +105,10 @@ Serious Slider version 1.0 brings a lot of new features but moves styling of ins
105
 
106
  == Changelog ==
107
 
 
 
 
 
108
  = 1.0.2 =
109
  * Fixed shortcode attributes filter in wrong location and not working
110
  * Fixed slider missing indicators when 'cryout theme' style is used
7
  Text Domain: cryout-serious-slider
8
  Requires at least: 4.0
9
  Tested up to: 4.9
10
+ Stable tag: 1.0.3
11
 
12
  Serious Slider is a highly efficient SEO friendly fully translatable accessibility ready free image slider for WordPress. Seriously!
13
 
105
 
106
  == Changelog ==
107
 
108
+ = 1.0.3 =
109
+ * Fixed slider indicators being left aligned in Webkit browsers
110
+ * Tweaked and re-checked all slider styles
111
+
112
  = 1.0.2 =
113
  * Fixed shortcode attributes filter in wrong location and not working
114
  * Fixed slider missing indicators when 'cryout theme' style is used
resources/slider.js CHANGED
@@ -95,7 +95,7 @@ if (typeof jQuery === 'undefined') {
95
 
96
  var Carousel = function (element, options) {
97
  this.$element = $(element)
98
- this.$indicators = this.$element.find('.seriousslider-indicators')
99
  this.options = options
100
  this.paused = null
101
  this.sliding = null
95
 
96
  var Carousel = function (element, options) {
97
  this.$element = $(element)
98
+ this.$indicators = this.$element.find('.seriousslider-indicators-inside')
99
  this.options = options
100
  this.paused = null
101
  this.sliding = null
resources/style.css CHANGED
@@ -534,7 +534,7 @@
534
  text-align: justify;
535
  }
536
 
537
- .seriousslider-caption,
538
  .seriousslider-caption .seriousslider-caption-title {
539
  color: #FFF;
540
  }
@@ -553,6 +553,7 @@
553
 
554
  .seriousslider-caption-buttons {
555
  margin-top: 2em;
 
556
  }
557
 
558
  .seriousslider-caption-buttons a + a {
@@ -575,7 +576,6 @@
575
  cursor: pointer;
576
  background: transparent;
577
  color: #fff;
578
- text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
579
  -webkit-transition: .3s ease-out;
580
  transition: .3s ease-out;
581
  }
@@ -629,12 +629,23 @@
629
  z-index: 15;
630
  padding-left: 0;
631
  text-align: center;
632
- list-style: none;
633
  margin: 0 auto;
634
  cursor: default;
635
  }
 
 
 
 
 
 
 
 
 
 
 
 
636
 
637
- ol.seriousslider-indicators li {
638
  display: inline-block;
639
  width: 12px;
640
  height: 12px;
@@ -642,25 +653,24 @@ ol.seriousslider-indicators li {
642
  text-indent: -999px;
643
  cursor: pointer;
644
  border: 2px solid #FFF;
645
- box-shadow: 0 1px 1px rgba(0,0,0,.2);
646
  border-radius: 100px;
647
  -webkit-transition: .3s ease-out;
648
  transition: .3s ease-out;
649
  }
650
 
651
- ol.seriousslider-indicators li:hover {
652
  background: rgba(255, 255, 255, .5);
653
  }
654
 
655
- ol.seriousslider-indicators li.active {
656
  background: rgba(255, 255, 255, 1);
657
  }
658
 
659
- ol.seriousslider-indicators li + li {
660
- margin-left: 5px;
661
  }
662
 
663
- ol.seriousslider-indicators .active {}
664
 
665
  .seriousslider-caption {
666
  position: absolute;
@@ -866,7 +876,7 @@ ol.seriousslider-indicators .active {}
866
  background-color: rgba(0,0,0,0);
867
  }
868
 
869
- .seriousslider-light2 .seriousslider-indicators .active {
870
  background-color: rgba(255, 255, 255, .8);
871
  }
872
 
@@ -957,14 +967,11 @@ ol.seriousslider-indicators .active {}
957
  background: rgba(0, 0, 0, .5);
958
  }
959
 
960
- .seriousslider-dark .seriousslider-indicators {
961
- }
962
-
963
  .seriousslider-dark .seriousslider-indicators li {
964
  width: 14px;
965
  height: 14px;
966
  border-radius: 100px;
967
- border: 3px solid rgba(255, 255, 255, 0.5);
968
  background-color: rgba(0, 0, 0, 0.5);
969
  background-clip: padding-box;
970
  -webkit-transition: .3s ease-out;
@@ -998,6 +1005,7 @@ ol.seriousslider-indicators .active {}
998
  letter-spacing: 1px;
999
  text-shadow: 0 0;
1000
  text-transform: uppercase;
 
1001
  color: #FFF;
1002
  background: rgba(0, 0, 0, .5);
1003
  -webkit-transition: .3s ease-out;
@@ -1044,12 +1052,11 @@ ol.seriousslider-indicators .active {}
1044
  background: rgba(0, 0, 0, 0.5);
1045
  }
1046
 
1047
- .seriousslider-square .seriousslider-indicators {
1048
- }
1049
-
1050
  .seriousslider-square .seriousslider-indicators li {
1051
  width: 12px;
1052
  height: 12px;
 
 
1053
  background: rgba(0, 0, 0, .5);
1054
  -webkit-transition: .3s ease-out;
1055
  transition: .3s ease-out;
@@ -1063,7 +1070,7 @@ ol.seriousslider-indicators .active {}
1063
  background: rgba(255, 255, 255, 1);
1064
  }
1065
 
1066
- /* ## Square Theme */
1067
  .seriousslider-tall .seriousslider-caption-title {
1068
  font-size: 3.1em;
1069
  font-weight: 300;
@@ -1130,19 +1137,17 @@ ol.seriousslider-indicators .active {}
1130
  background: rgba(0, 0, 0, .75);
1131
  }
1132
 
1133
- .seriousslider-tall .seriousslider-indicators {
1134
- }
1135
-
1136
  .seriousslider-tall .seriousslider-indicators li {
1137
  width: 8px;
1138
  height: 14px;
 
1139
  border-radius: 100px;
1140
  background: rgba(255,255,255,.8);
1141
  -webkit-transition: .3s ease-out;
1142
  transition: .3s ease-out;
1143
  }
1144
 
1145
- .seriousslider-tall ol.seriousslider-indicators li + li {
1146
  margin-left: 3px;
1147
  }
1148
 
@@ -1157,10 +1162,11 @@ ol.seriousslider-indicators .active {}
1157
  }
1158
 
1159
 
1160
- /* Left Caption Theme */
1161
  .seriousslider-captionleft .seriousslider-caption {
1162
  left: 10%;
1163
  right: auto;
 
1164
  padding: 2em;
1165
  background: rgba(0,0,0,.5);
1166
  }
@@ -1203,7 +1209,6 @@ ol.seriousslider-indicators .active {}
1203
  left: 0;
1204
  }
1205
 
1206
-
1207
  .seriousslider-captionleft .seriousslider-control.right {
1208
  right: 0;
1209
  }
@@ -1257,8 +1262,17 @@ ol.seriousslider-indicators .active {}
1257
  }
1258
 
1259
  .seriousslider-captionleft .seriousslider-indicators {
 
 
 
 
 
 
 
 
 
 
1260
  bottom: 0;
1261
- display: table;
1262
  padding: 0.2em 2em;
1263
  border-radius: 100px 100px 0 0;
1264
  box-shadow: 0 -3px 2px rgba(0, 0, 0, 0.2);
@@ -1266,8 +1280,9 @@ ol.seriousslider-indicators .active {}
1266
  }
1267
 
1268
  .seriousslider-captionleft .seriousslider-indicators li {
1269
- width: 12px;
1270
- height: 12px;
 
1271
  border-radius: 100px;
1272
  background: rgba(0,0,0,.15);
1273
  box-shadow: 1px 1px 1px rgba(0,0,0,.15) inset;
@@ -1283,7 +1298,7 @@ ol.seriousslider-indicators .active {}
1283
  background: rgba(0, 0, 0, 0.5);
1284
  }
1285
 
1286
- /* Bottom Caption Theme */
1287
  .seriousslider-captionbottom .seriousslider-caption {
1288
  left: 0;
1289
  right: 0;
@@ -1313,7 +1328,6 @@ ol.seriousslider-indicators .active {}
1313
  display: inline-block;
1314
  padding: 5px 15px;
1315
  background: rgba(0,0,0,.5);
1316
- font-size: 0.9em;
1317
  font-weight: 400;
1318
  text-transform: uppercase;
1319
  letter-spacing: 1px;
@@ -1369,7 +1383,7 @@ ol.seriousslider-indicators .active {}
1369
  color: rgba(0,0,0,.8);
1370
  }
1371
 
1372
- .seriousslider-captionbottom .seriousslider-indicators {
1373
  bottom: 12px;
1374
  display: table;
1375
  padding: 0.2em 2em;
@@ -1378,7 +1392,9 @@ ol.seriousslider-indicators .active {}
1378
  .seriousslider-captionbottom .seriousslider-indicators li {
1379
  width: 10px;
1380
  height: 10px;
1381
- background: rgba(255,255,255,.75);
 
 
1382
  -webkit-transition: .3s ease-out;
1383
  transition: .3s ease-out;
1384
  }
534
  text-align: justify;
535
  }
536
 
537
+ .seriousslider-caption,
538
  .seriousslider-caption .seriousslider-caption-title {
539
  color: #FFF;
540
  }
553
 
554
  .seriousslider-caption-buttons {
555
  margin-top: 2em;
556
+ font-size: 0.9em;
557
  }
558
 
559
  .seriousslider-caption-buttons a + a {
576
  cursor: pointer;
577
  background: transparent;
578
  color: #fff;
 
579
  -webkit-transition: .3s ease-out;
580
  transition: .3s ease-out;
581
  }
629
  z-index: 15;
630
  padding-left: 0;
631
  text-align: center;
 
632
  margin: 0 auto;
633
  cursor: default;
634
  }
635
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
636
+ .cryout-serious-slider .seriousslider-indicators {
637
+ display: inline-block;
638
+ }
639
+ }
640
+
641
+ .cryout-serious-slider .seriousslider-indicators-inside {
642
+ margin: 0 auto;
643
+ display: block;
644
+ list-style: none;
645
+ text-align: center;
646
+ }
647
 
648
+ .seriousslider-indicators li {
649
  display: inline-block;
650
  width: 12px;
651
  height: 12px;
653
  text-indent: -999px;
654
  cursor: pointer;
655
  border: 2px solid #FFF;
 
656
  border-radius: 100px;
657
  -webkit-transition: .3s ease-out;
658
  transition: .3s ease-out;
659
  }
660
 
661
+ .seriousslider-indicators li:hover {
662
  background: rgba(255, 255, 255, .5);
663
  }
664
 
665
+ .seriousslider-indicators li.active {
666
  background: rgba(255, 255, 255, 1);
667
  }
668
 
669
+ .seriousslider-indicators li + li {
670
+ margin-left: 3px;
671
  }
672
 
673
+ .seriousslider-indicators .active {}
674
 
675
  .seriousslider-caption {
676
  position: absolute;
876
  background-color: rgba(0,0,0,0);
877
  }
878
 
879
+ .seriousslider-light2 .seriousslider-indicators li.active {
880
  background-color: rgba(255, 255, 255, .8);
881
  }
882
 
967
  background: rgba(0, 0, 0, .5);
968
  }
969
 
 
 
 
970
  .seriousslider-dark .seriousslider-indicators li {
971
  width: 14px;
972
  height: 14px;
973
  border-radius: 100px;
974
+ border: 3px solid rgba(255, 255, 255, 0.2);
975
  background-color: rgba(0, 0, 0, 0.5);
976
  background-clip: padding-box;
977
  -webkit-transition: .3s ease-out;
1005
  letter-spacing: 1px;
1006
  text-shadow: 0 0;
1007
  text-transform: uppercase;
1008
+ font-weight: 300;
1009
  color: #FFF;
1010
  background: rgba(0, 0, 0, .5);
1011
  -webkit-transition: .3s ease-out;
1052
  background: rgba(0, 0, 0, 0.5);
1053
  }
1054
 
 
 
 
1055
  .seriousslider-square .seriousslider-indicators li {
1056
  width: 12px;
1057
  height: 12px;
1058
+ border: none;
1059
+ border-radius: 0;
1060
  background: rgba(0, 0, 0, .5);
1061
  -webkit-transition: .3s ease-out;
1062
  transition: .3s ease-out;
1070
  background: rgba(255, 255, 255, 1);
1071
  }
1072
 
1073
+ /* ## Tall Theme */
1074
  .seriousslider-tall .seriousslider-caption-title {
1075
  font-size: 3.1em;
1076
  font-weight: 300;
1137
  background: rgba(0, 0, 0, .75);
1138
  }
1139
 
 
 
 
1140
  .seriousslider-tall .seriousslider-indicators li {
1141
  width: 8px;
1142
  height: 14px;
1143
+ border: 0;
1144
  border-radius: 100px;
1145
  background: rgba(255,255,255,.8);
1146
  -webkit-transition: .3s ease-out;
1147
  transition: .3s ease-out;
1148
  }
1149
 
1150
+ .seriousslider-tall .seriousslider-indicators li + li {
1151
  margin-left: 3px;
1152
  }
1153
 
1162
  }
1163
 
1164
 
1165
+ /* ## Left Caption Theme */
1166
  .seriousslider-captionleft .seriousslider-caption {
1167
  left: 10%;
1168
  right: auto;
1169
+ min-width: 33%;
1170
  padding: 2em;
1171
  background: rgba(0,0,0,.5);
1172
  }
1209
  left: 0;
1210
  }
1211
 
 
1212
  .seriousslider-captionleft .seriousslider-control.right {
1213
  right: 0;
1214
  }
1262
  }
1263
 
1264
  .seriousslider-captionleft .seriousslider-indicators {
1265
+ bottom: 0;
1266
+ display: block;
1267
+ left: 50%;
1268
+ right: auto;
1269
+ -webkit-transform: translateX(-50%);
1270
+ -ms-transform: translateX(-50%);
1271
+ transform: translateX(-50%);
1272
+ }
1273
+
1274
+ .seriousslider-captionleft .seriousslider-indicators-inside {
1275
  bottom: 0;
 
1276
  padding: 0.2em 2em;
1277
  border-radius: 100px 100px 0 0;
1278
  box-shadow: 0 -3px 2px rgba(0, 0, 0, 0.2);
1280
  }
1281
 
1282
  .seriousslider-captionleft .seriousslider-indicators li {
1283
+ width: 11px;
1284
+ height: 11px;
1285
+ border: none;
1286
  border-radius: 100px;
1287
  background: rgba(0,0,0,.15);
1288
  box-shadow: 1px 1px 1px rgba(0,0,0,.15) inset;
1298
  background: rgba(0, 0, 0, 0.5);
1299
  }
1300
 
1301
+ /* ## Bottom Caption Theme */
1302
  .seriousslider-captionbottom .seriousslider-caption {
1303
  left: 0;
1304
  right: 0;
1328
  display: inline-block;
1329
  padding: 5px 15px;
1330
  background: rgba(0,0,0,.5);
 
1331
  font-weight: 400;
1332
  text-transform: uppercase;
1333
  letter-spacing: 1px;
1383
  color: rgba(0,0,0,.8);
1384
  }
1385
 
1386
+ .seriousslider-captionbottom .seriousslider-indicators-inside {
1387
  bottom: 12px;
1388
  display: table;
1389
  padding: 0.2em 2em;
1392
  .seriousslider-captionbottom .seriousslider-indicators li {
1393
  width: 10px;
1394
  height: 10px;
1395
+ border: 0;
1396
+ border-radius: 0;
1397
+ background: rgba(0,0,0,.5);
1398
  -webkit-transition: .3s ease-out;
1399
  transition: .3s ease-out;
1400
  }