Использование Сова Карусель для опроса / викторины на мобильных устройствах

Question

Я создал опрос / викторину с совой Карусель, которая отлично работает на рабочем столе. Тем не менее, я не уверен, как заставить его работать на мобильном телефоне.

По сути, каждое изображение связано с определенным текстом (набором вопросов), и мне нужно, чтобы текст менялся при смене слайда / изображения на мобильном телефоне. Используя приведенный ниже код, я изменяю текст на рабочем столе при наведении курсора или нажатии; и если щелкнуть, то div, содержащий текст для этого изображения, остается видимым, поэтому гость может ответить на вопрос.

Вот мой код, и я был бы признателен за любые отзывы.

это мой div для картинки для рабочего стола:

<div id="piGal" class="owl-carousel owl-theme">
   <div class="item">
     <!-- the orginal link tag looks like this <a href="../images/image_main.jpg" target="_blank"  data-image="images/image_main.jpg" data-zoom-image="images/image_main.jpg"> -->
     <a href="../images/image_main.jpg"><img src="images/image_main.jpg" id="image_main" /></a>
   </div>
   <div class="item">
    <a href="#piGalimg_1"><img src="images/image_1.jpg" id="image_978" /></a>
   </div>
   <div class="item">
    <a href="#piGalimg_2"><img src="images/image_2.jpg" id="image_979" /></a>
   </div>
</div>

это мой div для изображений для мобильных устройств:

   <div id="mobileGallery" class="owl-carousel owl-theme">
       <div class="item"><img src="images/image_main.jpg" id="main_prodimage" class="product_info_gallery" /></div>
       <div class="item"><img src="images/image_1.jpg" class="product_info_gallery" id="image_978" /> </div>
       <div class="item"><img src="images/image_2.jpg" class="product_info_gallery" id="image_979" /></div>
   </div>

и вот раздел викторины, текст, который я хочу изменить при смене изображения на мобильном телефоне / слайд:

                <div id="quiz_main_image" class="star2">This is a quiz.</div>
                <div id="quiz_options_978" class="star2">Question 1?
                    <br /><input type="radio" id="quiz_978_answer" value="Answer 1" />Answer 1
                    <br /><input type="radio" id="quiz_978_answer" value="Answer 2" />Answer 2
                </div>
                <div id="quiz_options_979" class="star2">Question 2?
                    <br /><input type="radio" id="quiz_979_answer" value="Answer 1" />Answer 1
                    <br /><input type="radio" id="quiz_979_answer" value="Answer 2" />Answer 2
                </div>

         <script type="text/javascript">
            $(document).ready(function() {
                var active_div;

                $('#quiz_main_image').show();
                $('#quiz_options_978').hide();
                $('#quiz_options_979').hide();

                $('#image_main').click(function() {
                    $('#quiz_main_image').show();
                       active_div = 'quiz_main_image';
                    $('#quiz_options_978').hide();
                    $('#quiz_options_979').hide();
                }).hover(function() {
                    $('#quiz_main_image').show();
                    $('#quiz_options_978').hide();
                    $('#quiz_options_979').hide();
                },
                function() {
                    if ( active_div == 978 ) { $('#quiz_options_978').show(); }
                    else { $('#quiz_options_978').hide(); }
                    if ( active_div == 979 ) { $('#quiz_options_979').show(); }
                    else { $('#quiz_options_979').hide(); }
                    if ( active_div == 'quiz_main_image' ) { $('#quiz_main_image').show(); }
                    else { $('#quiz_main_image').hide(); }
                });

                $('#image_978').click(function() {
                    $('#quiz_main_image').hide();
                    $('#quiz_options_978').show();
                       active_div = 978;
                    $('#quiz_options_979').hide();
                }).hover(function() {
                    if ($('#quiz_options_978').is(':visible')) active_div = 978; else 
                    if ($('#quiz_options_979').is(':visible')) active_div = 979; else 
                        active_div = 'quiz_main_image'; 
                    $('#quiz_main_image').hide();
                    $('#quiz_options_978').show();
                    $('#quiz_options_979').hide();
                },
                function() {
                    if ( active_div == 978 ) { $('#quiz_options_978').show(); }
                    else { $('#quiz_options_978').hide(); }
                    if ( active_div == 979 ) { $('#quiz_options_979').show(); }
                    else { $('#quiz_options_979').hide(); }
                    if ( active_div == 'quiz_main_image' ) { $('#quiz_main_image').show(); }
                    else { $('#quiz_main_image').hide(); }
                });

                $('#image_979').click(function() {
                    $('#quiz_main_image').hide();
                    $('#quiz_options_978').hide();
                    $('#quiz_options_979').show();
                       active_div = 979;
                }).hover(function() {
                    if ($('#quiz_options_978').is(':visible')) active_div = 978; else 
                    if ($('#quiz_options_979').is(':visible')) active_div = 979; else 
                        active_div = 'quiz_main_image'; 
                    $('#quiz_main_image').hide();
                    $('#quiz_options_978').hide();
                    $('#quiz_options_979').show();
                },
                function() {
                    if ( active_div == 978 ) { $('#quiz_options_978').show(); }
                    else { $('#quiz_options_978').hide(); }
                    if ( active_div == 979 ) { $('#quiz_options_979').show(); }
                    else { $('#quiz_options_979').hide(); }
                    if ( active_div == 'quiz_main_image' ) { $('#quiz_main_image').show(); }
                    else { $('#quiz_main_image').hide(); }
                });

            });
         </script>