custom required HTML struture for flexslider on any basic page
 ---------------------------------------------------------------------------------------------
<div class="flexslider-road-saftey">
    <ul class="slides">
        <li>
            <img src="/sites/default/files/images/activities/road-safety-cell-03.jpeg" width="480" height="384">
        </li>
        <li>
            <img src="/sites/default/files/images/activities/road-safety-cell-08.jpeg" width="480" height="384">
        </li>
        <li>
            <img src="/sites/default/files/images/activities/road-safety-cell-10.jpeg" width="480" height="384">
        </li>
    </ul>
</div>

________________________________________________

attach flexslider library 
--------------------------------

if required atttach on every page or any certain  page 
by applying hook page prepocess 

put flexslider library folder in your custom theme folder

i have applied on custom global theme

global-styling:
  version: 1.x
  css:
    theme:
      libraries/flexslider/flexslider.css: {}
     
  js:
    libraries/flexslider/jquery.flexslider-min.js: {}



---------------------------------------------------------------------------------------

if not visbile the pre next link then ight got hidden 

apply ths css 



/*************************flex slider on road safety page***********************/

/* FlexSlider container */
.flexslider-road-saftey {
  position: relative;
}

/* Arrows */
.flexslider-road-saftey .flex-direction-nav a {
  opacity: 1 !important;
  display: block !important;
  z-index: 10;
}

.flexslider-road-saftey .flex-prev {
  left: 10px !important;
}

.flexslider-road-saftey .flex-next {
  right: 10px !important;
}

/* Bullets (dots) */
.flexslider-road-saftey .flex-control-nav {
  bottom: -35px;
}

.flexslider-road-saftey .flex-control-nav li a {
  background: #999;
}

.flexslider-road-saftey .flex-control-nav li a.flex-active {
  background: #000;
}