DNNGo demo dnn skin unlimited color pack 048 > Features > Short Codes

Carousel

/ /

CAROUSEL ONE

CAROUSEL

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

PHOTOGRAPHY

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

COLOURING

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

STATISTICS

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

CAROUSEL

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

PHOTOGRAPHY

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

COLOURING

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

STATISTICS

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

SOURCE CODE

<div class="carousel carousel_1" data-items="4" data-navigation="true" data-pagination="true" data-autoplay="true">
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_01.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_01.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>CAROUSEL</h3>
    <p>Content text ... </p>
  </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_02.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_02.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>PHOTOGRAPHY</h3>
    <p>Content text ... </p>
  </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_03.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_03.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>COLOURING</h3>
    <p>Content text ... </p>
  </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_04.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_04.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>STATISTICS</h3>
    <p>Content text ... </p>
  </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_01.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_01.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>CAROUSEL</h3>
    <p>Content text ... </p>
  </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_02.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_02.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>PHOTOGRAPHY</h3>
    <p>Content text ... </p>
  </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_03.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_03.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>COLOURING</h3>
    <p>Content text ... </p>
  </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/33/carousel_04.jpg" class="LightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_04.jpg" />
        <div class="ico"> <span class="glyphicons glyph-picture"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>STATISTICS</h3>
    <p>Content text ... </p>
  </div>
</div>

CAROUSEL TWO

SOURCE CODE

<div class="carousel carousel_2" data-pagination="false" data-navigation="true" data-autoplay="true" data-autoheight="true">
  <div class="item"> <img alt="" src="/portals/33/carousel_05.jpg" /> </div>
  <div class="item"> <img alt="" src="/portals/33/carousel_06.jpg" /> </div>
  <div class="item"> <img alt="" src="/portals/33/carousel_07.jpg" /> </div>
</div>

CAROUSEL THREE

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

SOURCE CODE

<div class="carousel carousel_3" data-autoplay="true" data-pagination="true" data-navigation="true" data-items="4">
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_08.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_09.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_10.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_11.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_08.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_09.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_10.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/33/carousel_11.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="glyphicons glyph-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
</div>

CAROUSEL FOUR

SOURCE CODE

<div class="sync_carousel  sync_carousel_2">
  <div class="carousel_main">
    <div class="item"> <img alt="" src="/portals/33/carousel_12.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_13.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_14.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_15.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_12.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_13.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_14.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_15.jpg" /> </div>
  </div>
  <div class="carousel_nav">
    <div class="item"> <img alt="" src="/portals/33/carousel_12_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_13_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_14_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_15_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_12_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_13_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_14_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/33/carousel_15_small.jpg" /> </div>
  </div>
</div>

SKIN LAYOUT

GOOGLE MAP

Carousel

CAROUSEL ONE

CAROUSEL

PHOTOGRAPHY

COLOURING

STATISTICS

CAROUSEL

PHOTOGRAPHY

COLOURING

STATISTICS

CAROUSEL TWO

CAROUSEL THREE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

CAROUSEL FOUR