слайдер с вкладками / карусель с использованием JavaScript и начальной загрузки

Question

Карусель для объяснения деталей продукта с помощью вкладок, так что вы можете отделить данные, и они выглядят броскими и отсортированными.В этой карусели текст и изображения меняются по нажатию вкладки, для этого я использовал Javascript и bootstrap.При нажатии на фоновое изображение с вкладками целого контейнера меняйте

нажмите здесь для получения более подробной информации http://technieme.blogspot.com/2018/12/tabbed-slider-carousel-using-javascript.html

    /*half slider of index page*/
        function openCity(cityName) {
            var i;
            var x = document.getElementsByClassName("city");
            for (i = 0; i < x.length; i++) {
               x[i].style.display = "none";  
            }
            document.getElementById(cityName).style.display = "block";          
        }   
        function myFunction() {
            document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSDoq3gdjaEEWNd81zJ-_JcQTTKWK7ETteYMExSNRziJwyc7w0ZA')";
            document.getElementById("defaultOpen").click();
        }
        function aboutUs() {
            document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrvLNaL06xkuYj_ExN3MYRWJ8D0IQCgL8ZMnSHdyjNNekhv77I')";
        }
        function product() {
            document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWx6iwZSSNguHXpqaQnww3UzoA0tiXN2C2J_9SPsnjTNT4K4vn')";
        }
        function charger() {
            document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSZCXFz6pzUherzMLhe-N1sAWziaEsgle8fjRpoYS5yNgNoeQV')";
        }
        myFunction();      
        /*end of half slider*/

.main li{
                list-style: none; 
                color: #F1591C;
                display: inline;  
                padding-left:4rem;
                font-size: 12px !important;
                margin-left: 1rem;
               }
              .main li:hover{
                font-weight: bold;
                text-transform: uppercase;
                font-size: 12px !important;
               } 
              .main .city{
                padding: 7rem 5rem;
               } 

 <div class="container-solid">
        <div id="main" class="main" style="background-position: center; background-repeat: no-repeat; background-size: cover;">
          <div class="col-sm-6" style="padding-left: 20px;"> 
            <div class="text-area"  style="background-color: #000; opacity: 0.7; "> 
              <ul class="w3-bar w3-black" style="padding-top: 30px;"> 
                <li class="tablinks" onclick="openCity('Technology');myFunction()">Technology</li>
                <li class="tablinks" onclick="openCity('AboutUs');aboutUs()">About us</li>
                <li class="tablinks" onclick="openCity('Product');product()">Product</li>
                <li class="tablinks" onclick="openCity('Charger');charger()">charger</li>
              </ul>
              <div id="Technology" class="w3-container city">
                <div class="text-center">
                  <h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">Technology</h2>
                </div>
                <div class="text-justify">
                  <p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
                </div> 
              </div>
              <div id="AboutUs" class="w3-container city" style="display:none">
                <div class="text-center">
                  <h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">About us</h2>
                </div>
                <div class="text-justify">
                  <p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
                </div> 
              </div>
              <div id="Product" class="w3-container city" style="display:none">
                <div class="text-center">
                  <h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">Product</h2>
                </div>
                <div class="text-justify">
                  <p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
                </div> 
              </div>      
              <div id="Charger" class="w3-container city" style="display:none">
                <div class="text-center">
                  <h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">Charger</h2>
                </div>
                <div class="text-justify">
                  <p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
                </div> 
              </div>
            </div>
          </div>
        </div>
      </div>