{"id":1945830,"date":"2020-02-13T10:03:09","date_gmt":"2020-02-13T15:03:09","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&p=1945830"},"modified":"2026-04-02T17:33:28","modified_gmt":"2026-04-02T21:33:28","slug":"creating-a-slider-in-mobile-photo-view","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/creating-a-slider-in-mobile-photo-view\/","title":{"rendered":"Creating an Event Slider in Mobile Photo View"},"content":{"rendered":"\n

In this article, we\u2019ll talk about how we can work with JavaScript-based events in The Events Calendar<\/a> plugin to build a complex customization. Our goal is to turn the photo view into a slider on small screens (e.g. phones and tablets), but retain the full layout on larger screens.<\/p>\n\n\n\n

\"Creating<\/figure>\n\n\n\n

One thing we’ll do is adjust the slider based on whether the device is portrait view (we\u2019ll show a single event and navigation) or in landscape view (we\u2019ll show two events per slide).<\/p>\n\n\n\n

Override the template files<\/h2>\n\n\n\n

Let\u2019s make a few adjustments to the template first. We’re going to override these template files in the plugin:<\/p>\n\n\n

\n\/wp-content\/plugins\/events-pro\/src\/views\/v2\/photo.php\n\/wp-content\/plugins\/events-pro\/src\/views\/v2\/photo\/event.php\n<\/pre><\/div>\n\n\n
So, let’s copy those files and place them in our theme just as we would do when customizing any template<\/a> in the plugin. They can go here:<\/p>\n\n\n
\n[your-theme]\/tribe\/events-pro\/v2\/photo.php\n[your-theme]\/tribe\/events-pro\/v2\/photo\/event.php\n<\/pre><\/div>\n\n\n
Customizing the templates<\/h2>\n\n\n\n
Here’s the code we want to use for the photo.php<\/code> file:<\/p>\n\n\n
\n<?php\n$header_classes = [ 'tribe-events-header' ];\nif ( empty( $disable_event_search ) ) {\n  $header_classes[] = 'tribe-events-header--has-event-search';\n}\n?>\n<div\n  <?php tribe_classes( $container_classes ); ?>\n  data-js="tribe-events-view"\n  data-view-rest-nonce="<?php echo esc_attr( $rest_nonce ); ?>"\n  data-view-rest-url="<?php echo esc_url( $rest_url ); ?>"\n  data-view-manage-url="<?php echo esc_attr( $should_manage_url ); ?>"\n  <?php foreach ( $container_data as $key => $value ) : ?>\n  data-view-<?php echo esc_attr( $key ) ?>="<?php echo esc_attr( $value ) ?>"\n  <?php endforeach; ?>\n  <?php if ( ! empty( $breakpoint_pointer ) ) : ?>\n  data-view-breakpoint-pointer="<?php echo esc_attr( $breakpoint_pointer ); ?>"\n  <?php endif; ?>\n>\n  <div class="tribe-common-l-container tribe-events-l-container">\n    <?php $this->template( 'components\/loader', [ 'text' => __( 'Loading...', 'tribe-events-calendar-pro' ) ] ); ?>\n\n    <?php $this->template( 'components\/data' ); ?>\n\n    <?php $this->template( 'components\/before' ); ?>\n\n    <header <?php tribe_classes( $header_classes ); ?>>\n      <?php $this->template( 'components\/messages' ); ?>\n\n      <?php $this->template( 'components\/breadcrumbs' ); ?>\n\n      <?php $this->template( 'components\/events-bar' ); ?>\n\n      <?php $this->template( 'photo\/top-bar' ); ?>\n    <\/header>\n\n    <?php $this->template( 'components\/filter-bar' ); ?>\n\n    <div class="tribe-events-pro-photo swiper-container">\n\n      <div class="tribe-events-pro-photo__events tribe-common-g-row tribe-common-g-row--gutters swiper-wrapper">\n\n      <?php foreach ( $events as $event ) : ?>\n        <?php $this->setup_postdata( $event ); ?>\n\n        <?php $this->template( 'photo\/event', [ 'event' => $event ] ); ?>\n\n      <?php endforeach; ?>\n\n      <\/div>\n\n      <button class="swiper-button-prev tribe-common-c-btn-icon tribe-common-c-btn-icon--caret-left"><\/button>\n      <button class="swiper-button-next tribe-common-c-btn-icon tribe-common-c-btn-icon--caret-right"><\/button>\n\n      <div class="swiper-pagination"><\/div>\n\n    <\/div>\n\n    <?php $this->template( 'photo\/nav' ); ?>\n\n    <?php $this->template( 'components\/ical-link' ); ?>\n\n    <?php $this->template( 'components\/after' ); ?>\n  <\/div>\n<\/div>\n\n<?php $this->template( 'components\/breakpoints' ); ?>\n<\/pre><\/div>\n\n\n
Next, edit event.php<\/code> so it looks like this<\/p>\n\n\n
\n<?php\n$classes = get_post_class( [ 'tribe-common-g-col', 'tribe-events-pro-photo__event', 'swiper-slide' ], $event->ID );\n\nif ( $event->featured ) {\n  $classes[] = 'tribe-events-pro-photo__event--featured';\n}\n\n?>\n<article <?php tribe_classes( $classes ) ?>>\n\n  <?php $this->template( 'photo\/event\/featured-image', [ 'event' => $event ] ); ?>\n\n  <div class="tribe-events-pro-photo__event-details-wrapper">\n  <?php $this->template( 'photo\/event\/date-tag', [ 'event' => $event ] ); ?>\n    <div class="tribe-events-pro-photo__event-details">\n      <?php $this->template( 'photo\/event\/date-time', [ 'event' => $event ] ); ?>\n      <?php $this->template( 'photo\/event\/title', [ 'event' => $event ] ); ?>\n      <?php $this->template( 'photo\/event\/cost', [ 'event' => $event ] ); ?>\n    <\/div>\n  <\/div>\n\n<\/article>\n<\/pre><\/div>\n\n\n
We haven’t made too many changes here. Let\u2019s add some styles so our slider looks good. Add the following to the style.css<\/code> file in your theme, or using s CSS override<\/a>.<\/p>\n\n\n
\n.tribe-events-pro .tribe-events-pro-photo {\n  margin: 0 -21px;\n  overflow: hidden;\n  position: relative;\n}\n\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo {\n  margin: 0;\n  padding: 0;\n}\n\n.tribe-events-pro .tribe-events-pro-photo__events {\n  flex-wrap: nowrap;\n  margin: 0;\n}\n\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo__events {\n  flex-wrap: wrap;\n}\n\n.tribe-events-pro .tribe-events-pro-photo__event {\n  flex: none;\n}\n\n.tribe-events-pro .tribe-events-pro-photo .swiper-pagination {\n  display: flex;\n  justify-content: center;\n  padding: 15px 16px;\n}\n\n.tribe-events-pro .tribe-events-pro-photo .swiper-pagination-bullet {\n  background-color: #bababa;\n  border-radius: 50%;\n  flex: none;\n  height: 10px;\n  margin: 0 6px;\n  width: 10px;\n}\n\n.tribe-events-pro .tribe-events-pro-photo .swiper-pagination-bullet:hover,\n.tribe-events-pro .tribe-events-pro-photo .swiper-pagination-bullet:focus,\n.tribe-events-pro .tribe-events-pro-photo .swiper-pagination-bullet-active {\n  background-color: #727272;\n}\n\n.tribe-events-pro .tribe-events-pro-photo .swiper-button-prev,\n.tribe-events-pro .tribe-events-pro-photo .swiper-button-next {\n  position: absolute;\n  bottom: 10px;\n}\n\n.tribe-events-pro .tribe-events-pro-photo .swiper-button-prev {\n  left: 21px;\n}\n\n.tribe-events-pro .tribe-events-pro-photo .swiper-button-next {\n  right: 21px;\n}\n\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo .swiper-pagination,\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo .swiper-button-prev,\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo .swiper-button-next {\n  display: none;\n  visibility: hidden;\n}\n<\/pre><\/div>\n\n\n
Now that we have all our styles set up, we need to add in some JavaScript functionality. I\u2019ll be creating my file in [your-theme]\/assets\/js\/photo-swiper.js<\/code>, but you can create yours anywhere you want, as long as it contains this:<\/p>\n\n\n
\nvar photoSwiper = {};\n\n( function( $, obj ) {\n  'use strict';\n  var $document = $( document );\n \n  obj.selectors = {\n    slider: '.tribe-events-pro-photo.swiper-container',\n  };\n \n  obj.instances = {};\n \n  obj.deinitSwiper = function( $container ) {\n    var uid = $container.attr( 'data-view-breakpoint-pointer' )\n    $container\n    .find( obj.selectors.slider )\n    .each( function( index, slider ) {\n      if ( ! obj.instances[ uid + '-' + index ] ) {\n        return;\n      }\n \n      obj.instances[ uid + '-' + index ].destroy();\n    } );\n  };\n \n  obj.initSwiper = function( $container ) {\n    var uid = $container.attr( 'data-view-breakpoint-pointer' );\n    $container\n    .find( obj.selectors.slider )\n    .each( function( index, slider ) {\n      if ( obj.instances[ uid + '-' + index ] && obj.instances[ uid + '-' + index ].initialized ) {\n        return;\n      }\n \n      obj.instances[ uid + '-' + index ] = new Swiper( slider, {\n        slidesPerView: 'auto',\n        navigation: {\n          prevEl: slider.querySelector( '.swiper-button-prev' ),\n          nextEl: slider.querySelector( '.swiper-button-next' ),\n        },\n        pagination: {\n          el: '.swiper-pagination',\n          type: 'bullets',\n          bulletElement: 'button',\n          clickable: true,\n        }\n      } );\n    } );\n  };\n \n  obj.setSwiper = function( $container ) {\n      var containerState = $container.data( 'tribeEventsState' );\n      var isMobile = containerState.isMobile;\n \n      if ( isMobile ) {\n        obj.initSwiper( $container );\n      } else {\n        obj.deinitSwiper( $container );\n      }\n    };\n \n    obj.handleResize = function( event ) {\n      obj.setSwiper( event.data.container );\n    };\n \n    obj.bindEvents = function( $container ) {\n      $container.on( 'resize.tribeEvents', { container: $container }, obj.handleResize );\n    };\n \n    obj.deinit = function( event, jqXHR, settings ) {\n      var $container = event.data.container;\n      obj.deinitSwiper( $container );\n      $container.off( 'beforeAjaxSuccess.tribeEvents', obj.deinit )\n    };\n \n    obj.init = function( event, index, $container, data ) {\n      var $sliders = $container.find( obj.selectors.slider );\n \n      if ( ! $sliders.length ) {\n        return;\n      }\n \n      obj.setSwiper( $container );\n      obj.bindEvents( $container );\n      $container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.deinit );\n    };\n \n    obj.ready = function( event ) {\n      const manager = tribe.events.views.manager;\n      manager.$containers.each( function( index, container ) {\n        var $container = $( container );\n        obj.init( event, index, $container, manager.getContainerData( $container ) );\n      } );\n      $document.on( 'afterSetup.tribeEvents', manager.selectors.container, obj.init );\n    };\n \n    $document.ready( obj.ready );\n} )( jQuery, photoSwiper );\n<\/pre><\/div>\n\n\n
Phew, that\u2019s a lot of code! Let\u2019s break this down a little bit.<\/p>\n\n\n\n
First, we are using a great slider library called Swiper<\/a>. This is a very customizable and accessible slider. However, you are more than welcome to use any other slider library. If you do, keep in mind that the templates and styles may have to change.<\/p>\n\n\n\n
The main interaction with The Events Calendar is through the listener for the 'resize.tribeEvents'<\/code> event. You can see that we aren\u2019t just hooking into the 'resize'<\/code> event on the window<\/code> object. This is because The Events Calendar does some processing before firing the 'resize.tribeEvents'<\/code> event that can come in handy.<\/p>\n\n\n\n
The Events Calendar views have breakpoints much like media queries but do not use media queries. Instead, classes are applied based on the view container. So after every 'resize'<\/code> event, we do some calculations to determine whether the container is in mobile or desktop view. In the resize handler for the photo swiper, we read the 'isMobile'<\/code> container state variable which was processed just before firing the 'resize.tribeEvents'<\/code> event. This determines whether to initialize the slider or not.<\/p>\n\n\n\n
Lastly, we need to enqueue the required JavaScript files. Add the following code to your functions.php<\/code> file:<\/p>\n\n\n
\nfunction add_photo_swiper_js() {\n  wp_enqueue_script( 'swiper-js', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/4.5.1\/js\/swiper.min.js', [ 'tribe-events-views-v2-viewport' ], false, true );\n  wp_enqueue_script( 'custom-photo-swiper-js', get_stylesheet_directory_uri() . '\/assets\/js\/photo-swiper.js', [ 'swiper-js' ], false, true );\n}\nadd_action( 'wp_enqueue_scripts', 'add_photo_swiper_js' );\n<\/pre><\/div>\n\n\n
Once that\u2019s done, visit your photo view to see the result. You should see a slider on mobile and a grid on desktop.<\/p>\n\n\n\n
Congratulations! You\u2019ve just implemented slider customization for photo view on mobile.<\/p>\n\n\n\n
\"Custom<\/figure>\n","protected":false},"excerpt":{"rendered":"
In this article, we\u2019ll talk about how we can work with JavaScript-based events in The Events Calendar plugin to build a complex customization. Our goal is to turn the photo view into a slider on small screens (e.g. phones and tablets), but retain the full layout on larger screens. One thing we’ll do is adjust…<\/p>\n","protected":false},"author":1,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[24,79],"tags":[25],"stellar-product-taxonomy":[158],"class_list":["post-1945830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizing","category-snippets","tag-customizations","stellar-product-taxonomy-events-calendar-pro"],"acf":[],"taxonomy_info":{"category":[{"value":24,"label":"Customizations"},{"value":79,"label":"Snippets"}],"post_tag":[{"value":25,"label":"Customizations"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"sky","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/sky\/"},"comment_info":0,"category_info":[{"term_id":24,"name":"Customizations","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":157,"filter":"raw","term_order":"0","cat_ID":24,"category_count":157,"category_description":"","cat_name":"Customizations","category_nicename":"customizing","category_parent":0},{"term_id":79,"name":"Snippets","slug":"snippets","term_group":0,"term_taxonomy_id":79,"taxonomy":"category","description":"","parent":0,"count":80,"filter":"raw","term_order":"0","cat_ID":79,"category_count":80,"category_description":"","cat_name":"Snippets","category_nicename":"snippets","category_parent":0}],"tag_info":[{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":102,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1945830"}],"version-history":[{"count":2,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945830\/revisions"}],"predecessor-version":[{"id":1968453,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945830\/revisions\/1968453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1945830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945830"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}